Tekst u roditelju float-ova u CSS

Hajde da uklonimo svojstvo height za div i stavimo mali tekst ispred slike.

U ovom slučaju visina našeg div-a će biti jednaka visini teksta, a slika će i dalje izlaziti izvan div-a:

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

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

Hajde da stavimo tekst iza slike - rezultat se neće promeniti:

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

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

Hajde da učinimo da slika pluta (float) uz levu ivicu - rezultat će biti sličan:

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

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

Hajde da dodamo još jedan div ispod - slika će se nalepiti i na njega:

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

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

Ako u prvi div dodamo toliko teksta, da po visini bude veći od slike - ona se neće nalepiti na drugi 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;
}

Ovaj momenat je veoma važan - tokom razvoja može se desiti da u nekom bloku imate dosta teksta, a onda pri realnom radu sajta u tom bloku bude manje teksta nego što je planirano. Ispostaviće se da će u ovom slučaju isplivati problem nalepljivanja plutajućih elemenata na susedne blokove.