Cancelación del flujo con la propiedad clear en CSS

Para resolver este problema existe una propiedad especial clear, que cancela el flujo. El valor left cancela el flujo a la izquierda, el valor right - a la derecha, y el valor both - en ambos lados. Este valor es el que se utiliza con más frecuencia.

Por lo tanto, la propiedad clear cancela el flujo. En nuestro caso, esto nos permitirá hacer que la imagen flotante del primer div no se superponga al segundo div.

En este caso, clear debe aplicarse al elemento sobre el cual no deben superponerse los elementos flotantes, es decir, en nuestro caso, vale la pena aplicarlo al segundo div.

Hagámoslo - demos al segundo div, además de la clase parent, también la clase clearfix y para esta nueva clase establezcamos la propiedad clear con el valor both - la superposición de la imagen desaparecerá:

<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;
}

El nombre clearfix es generalmente aceptado, por lo tanto, en el futuro utilice precisamente este.