CSS-da float xususiyatiga kirish

Faraz qilaylik, bizda uzun matnli div bor. Keling, ushbu matnning boshiga rasm qo'shaylik:

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

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

Ko'rib turganingizdek, rasmning pastki qismi matnning birinchi qatorida joylashgan, qolgan qismi esa yuqoriga chiqib ketadi. Rasmning o'ng tomonida katta bo'sh joy hosil bo'ladi. Keling, matnning ushbu bo'sh joyni to'ldirishini ta'minlaylik. Buning uchun rasmga float xususiyatini left qiymatida beramiz:

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

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

Shunday qilib, endi rasm chap tomonda suzadi, matn esa unga mos ravishda o'ng tomondan o'rab oladi. Bunda rashm yonidagi bo'sh joy yo'qoladi.

Rasmni chapda emas, balki o'ngda suzishiga majbur qilish mumkin. Buning uchun float ni right qiymatiga o'rnating:

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

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

Uzun matn oling. Matnning boshiga bitta rasm, o'rtasiga esa boshqa rasm qo'ying. Birinchi rasm chap tomonda, ikkinchi rasm esa o'ng tomonda suzadigan qiling.