Annullare il float con la proprietà clear in CSS

Per risolvere questo problema esiste una proprietà speciale clear, che annulla il float. Il valore left annulla il float a sinistra, il valore right - a destra, e il valore both - da entrambi i lati. Questo valore è quello più utilizzato.

Quindi, la proprietà clear annulla il float. Nel nostro caso, questo ci permetterà di fare in modo che l'immagine fluttuante del primo div non si sovrapponga al secondo div.

Inoltre, clear dovrebbe essere applicato a quell'elemento sul quale gli elementi fluttuanti non dovrebbero sovrapporsi, cioè nel nostro caso dovrebbe essere applicato al secondo div.

Facciamolo - diamo al secondo div, oltre alla classe parent, anche la classe clearfix e per questa nuova classe impostiamo la proprietà clear con il valore both - la sovrapposizione dell'immagine scomparirà:

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

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

.clearfix {
	clear: both;
}

Il nome clearfix è comunemente accettato, quindi in futuro utilizzatelo proprio così.