CSS-de ýüzen elementleriň ebeveýnindäki tekst

Div üçin height aýratynlygyny aýyryp, suratdan öň kiçi bir tekst goýalyň.

Bu ýagdaýda biziň div-ymyzyň beýikligi tekstiň beýikligine deň bolar, we surat henizem div-den daşary çykar:

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

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

Teksti suratdan soň goýalyň - netije üýtgemeýär:

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

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

Suratyň çep tarapda ýüzüp ýörüşini edeliň - netije şuňa meňzer bolar:

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

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

Aşakda ýene bir div goşalyň - surat ona hem aralaşar:

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

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

Eger birinji div-e suratdan uzyn boljak ýaly köp tekst goşulsa - ol ikinji div-e aralaşmaz:

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

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

Bu nokat örän möhümdir - ösdürip düzüş wagtynda siziň käbir blogyňyzda ýeterlik köp tekst bolup, soňra sahypanyň iş wagtynda bu blokda meýilleşdirilenden az tekst bolup bilýär. Netijede, bu ýagdaýda ýüzen elementleriň goňşy bloklara aralaşýan problemi ýüze çykar.