CSS da floatlar ota-onasidagi matn

Keling, div uchun height xususiyatini olib tashlaylik va rasm oldiga kichik matn qo'shaylik.

Bunda, bizning divimizning balandligi matn balandligiga teng bo'ladi, va rasm hanuzgacha divdan tashqariga chiqib turadi:

<div>
	matn
	<img src="img.png" alt="">
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Keling, matnni rasm keyiniga qo'yamiz - natija o'zgarmaydi:

<div>
	<img src="img.png" alt="">
	matn
</div>

div {
	border: 1px solid red;
}
img {
	float: right;
}

Keling, rasm chap tomonga suzishi uchun qilaylik - natija shu o'xshash bo'ladi:

<div>
	<img src="img.png" alt="">
	matn
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

Keling, pastki qismga yana bir div qo'shaylik - rasm unga ham o'tib ketadi:

<div>
	<img src="img.png" alt="">
	matn
</div>
<div>
	matn
</div>

div {
	border: 1px solid red;
}
img {
	float: left;
}

Agar birinchi divga shunchalik ko'p matn qo'shiladiki, balandligi rasm balandligidan katta bo'lsa - u ikkinchi divga o'tib ketmaydi:

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

div {
	text-align: justify;
	border: 1px solid red;
}
img {
	float: left;
}

Bu nuqta juda muhim - dasturlashda shunday bo'lishi mumkinki, qandaydir blokda sizda etarlicha ko'p matn bo'ladi, lekin keyin vebsayt ishlashida shu blokda rejalashtirilganidan kamroq matn bo'ladi. Ma'lum bo'ladiki, bu holda suzuvchi elementlarning qo'shni bloklarga o'tib ketish muammosi paydo bo'ladi.