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;
}

Төмөнкү бөлүгүнө дагы бир див кошобуз - сүрөт ага да жабышат:

<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;
}

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