Testo nel genitore dei float in CSS

Rimuoviamo la proprietà height per il div e inseriamo un breve testo prima dell'immagine.

In questo caso l'altezza del nostro div sarà uguale all'altezza del testo, e l'immagine continuerà a uscire dal div:

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

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

Mettiamo il testo dopo l'immagine - il risultato non cambierà:

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

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

Facciamo in modo che l'immagine fluttui a sinistra - il risultato sarà analogo:

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

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

Aggiungiamo un altro div in fondo - l'immagine sovrapporrà anche ad esso:

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

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

Se invece nel primo div aggiungiamo così tanto testo che in altezza sarà più grande dell'immagine - essa non si sovrapporrà al secondo 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;
}

Questo punto è molto importante - durante lo sviluppo può succedere che in un blocco ci sia abbastanza testo, ma poi durante il funzionamento reale del sito in questo blocco ci sarà meno testo del previsto. Risulterà che in questo caso si manifesterà il problema della sovrapposizione degli elementi fluttuanti sui blocchi adiacenti.