Text v rodiči floatů v CSS

Odstraňme vlastnost height pro div a vložme krátký text před obrázek.

V tomto případě bude výška našeho divu rovna výšce textu a obrázek stále vyčnívá z divu:

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

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

Přidejme text za obrázek - výsledek se nezmění:

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

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

Nastavme, aby obrázek plaval vlevo - výsledek bude analogický:

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

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

Přidejme dole další div - obrázek najede i na něj:

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

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

Pokud do prvního divu přidáme tolik textu, že jeho výška bude větší než obrázek - nebude najíždět na 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 velmi důležitý - při vývoji může nastat situace, kdy v nějakém bloku máte dostatek textu, ale pak při reálném provozu webu bude v tomto bloku méně textu, než bylo plánováno. Ukáže se, že v tomto případě se projeví problém s najížděním plovoucích prvků na sousední bloky.