Tekst w rodzicu floatów w CSS

Usuńmy właściwość height dla diva i umieśćmy krótki tekst przed obrazkiem.

W tym przypadku wysokość naszego diva będzie równa wysokości tekstu, a obrazek nadal wystanie poza div:

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

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

Umieśćmy tekst po obrazku - wynik się nie zmieni:

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

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

Sprawmy, aby obrazek był wypozycjonowany po lewej stronie - wynik będzie analogiczny:

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

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

Dodajmy na dole jeszcze jeden div - obrazek nachodzi na niego:

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

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

Jeśli jednak w pierwszym divie dodamy tak dużo tekstu, że jego wysokość będzie większa niż obrazka - nie będzie on nachodzić na drugi div:

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

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

Ten moment jest bardzo ważny - podczas rozwoju może się zdarzyć, że w jakimś bloku masz wystarczająco dużo tekstu, a potem przy rzeczywistej pracy strony w tym bloku będzie mniej tekstu niż zaplanowano. Okaże się, że w tym przypadku ujawni się problem z nachodzeniem elementów pływających na sąsiednie bloki.