CSS да флоатлар отасидаги матн

Келгила, див учун height хусусиятини олиб ташлаб, расмдан олдин кичкина матн қўйайлик.

Бунда дивимизнинг баландлиги матннинг баландлигига тенг бўлади, расм эса дивдан ташкарига чиқиб туради:

<div>
	матн
	<img src="img.png" alt="">
</div>

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

Келгила, матнни расмдан кейин қўйайлик - натижа ўзгармайди:

<div>
	<img src="img.png" alt="">
	матн
</div>

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

Келгила, расм чап томонда учсин - натижа ўхшаш бўлади:

<div>
	<img src="img.png" alt="">
	матн
</div>

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

Келгила, pastki қисмга яна бир див қўшайлик - расм унга ҳам ёниб олади:

<div>
	<img src="img.png" alt="">
	матн
</div>
<div>
	матн
</div>

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

Агар биринчи дивга шунчалик кўп матн қўшилсаки, унинг баландлиги расмникидан катта бўлса - расм иккинчи дивга ёнбойламайди:

<div>
	<img src="img.png" alt="">
	some long text
</div>
<div>
	матн
</div>

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

Бу жуда муҳим момент - ишлаб чиқиш жараёнида сизнинг бирор блокингизда жуда кўп матн бўлиши мумкин, аммо сайт ишга тушиганда эса у блокда режалаштирилгандан камроқ матн бўлиши мумкин. Мана шундай ҳолатда сузувчан элементларнинг қўшни блокларга ёниб қолиши муаммоси юзага келади.