Text v rodičovi floatov v CSS

Odstráňme vlastnosť height pre div a vložme krátky text pred obrázok.

V tomto prípade bude výška nášho divu rovná výške textu a obrázok bude stále vyčnievať mimo div:

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

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

Pridajme text za obrázok - výsledok sa nezmení:

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

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

Nastavme, aby obrázok plával vľavo - výsledok bude analogický:

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

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

Pridajme dole ďalší div - obrázok naň prekryje:

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

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

Ak do prvého divu pridáme toľko textu, že jeho výška bude väčšia ako obrázka - nebude prekryvať druhý div:

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

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

Tento moment je veľmi dôležitý - pri vývoji môže nastať situácia, že v nejakom bloku máte dosť veľa textu, no potom pri reálnom behu stránky bude v tomto bloku menej textu, ako bolo plánované. Ukáže sa, že v tomto prípade sa prejaví problém s prekryvaním plávajúcich elementov na susedné bloky.