Tekst ujuvate elementide vanemas CSS-is

Eemaldame divi omaduse height ja paneme pildi ette väikese teksti.

Sel juhul on meie divi kõrgus võrdne teksti kõrgusega, kuid pilt ulatub endiselt divist välja:

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

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

Paneme teksti pildi järele - tulemus ei muutu:

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

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

Teeme nii, et pilt ujuks vasakus servas - tulemus on sarnane:

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

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

Lisame alla teise divi - pilt ulatub ka selle peale:

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

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

Kui aga esimesse divi lisada nii palju teksti, et selle kõrgus on pildi omast suurem, siis pilt ei ulatu teise divi peale:

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

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

See punkt on väga oluline - arenduse ajal võib juhtuda, et mõnes plokis on teil piisavalt palju teksti, kuid tegeliku veebisaidi töö ajal on selles plokis vähem teksti kui plaanitud. Selgub, et sel juhul ilmneb probleem, kus ujuvad elemendid ulatuvad naaberplokkide peale.