CSS'теги float касиетине киришүү

Кандайдыр бир узун текст менен дивибиз бар дейли. Бул тексттин башына сүрөттү коёлу:

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}

Көрүп тургандарыңыздай, сүрөттүн түбү тексттин биринчи сабында жайгашып, калган бөлүгү жогору көтөрүлөт. Сүрөттүн оң жагында чоң бош орун пайда болот. Бул бош орунду текст менен толтурсак болот. Бул үчүн сүрөткө float касиетин left маанисинде коёлу:

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}
img {
	float: left;
}

Ошентип, азыр сүрөт солго сүзүп жатканда, текст аны оңдон орошойт. Бул учурда сүрөттүн капталындагы бош орун жоголду.

Сүрөттү сол эмес, оң жагына сүзгүзүүгө болот. Бул үчүн float ту right маанисине коюңуз:

<div>
	<img src="img.png" alt="">
	some long text
</div>

div {
	width: 400px;
	text-align: justify;
}
img {
	float: right;
}

Узун текст алыңыз. Тексттин башына бир сүрөттү, ортосуна экинчи сүрөттү салыңыз. Биринчи сүрөт солго, экинчиси оңго сүзсө болот.