CSSда float хусусиятига кириш

Бизда узун матн бор див бўлсин. Келинг, шу матннинг бошланишига расм қўшайлик:

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

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

Кўриб турганингиздек, расмнинг пасти матннинг биринчи сатрида жойлашган, қолган кисми esa юқорига чиқиб кетган. Расмнинг ўнг томонида катта бўш жой ҳосил бўлди. Келинг, матн шу бўш жойни tолдириши учун қилайлик. Бунинг учун расмга 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;
}

Узун матн олинг. Матннинг бошланишига битта расм, ўртасига эса бошқа расмни қўйинг. Биринчи расм чапда, иккинчи расм эса ўнгда сузишига эришинг.