Besedilo v staršu plavajočih elementov v CSS

Odstranimo lastnost height za div in postavimo majhno besedilo pred sliko.

V tem primeru bo višina našega div enaka višini besedila, slika pa bo še vedno štrlela izven div:

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

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

Postavimo besedilo za sliko - rezultat se ne spremeni:

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

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

Naredimo, da slika plava na levi strani - rezultat bo podoben:

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

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

Spodaj dodajmo še en div - slika bo posegla tudi nanj:

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

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

Če pa v prvi div dodamo toliko besedila, da bo po višini večji od slike - ta ne bo posegala v drugi div:

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

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

Ta trenutek je zelo pomemben - pri razvoju se lahko zgodi, da imate v nekem bloku precej besedila, nato pa se ob dejanskem delovanju spletnega mesta v tem bloku prikaže manj besedila, kot je bilo načrtovano. Izkazalo se bo, da se v tem primeru pojavi težava s poseganjem plavajočih elementov v sosednje bloke.