Texto en el padre de flotantes en CSS

Quitemos la propiedad height para el div y pongamos un texto pequeño antes de la imagen.

En este caso, la altura de nuestro div será igual a la altura del texto, y la imagen seguirá saliéndose del div:

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

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

Pongamos el texto después de la imagen - el resultado no cambiará:

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

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

Hagamos que la imagen flote por el borde izquierdo - el resultado será análogo:

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

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

Agreguemos otro div abajo - la imagen se superpondrá también a él:

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

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

Si en el primer div agregamos tanto texto, que en altura será más grande que la imagen - esta no se superpondrá al segundo div:

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

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

Este momento es muy importante - durante el desarrollo puede darse el caso de que en algún bloque usted tenga bastante texto, y luego, durante el funcionamiento real del sitio, en este bloque haya menos texto del planeado. Resultará que en este caso se manifestará el problema de la superposición de elementos flotantes sobre bloques vecinos.