Comportamiento de los floats en el elemento padre en CSS

Supongamos ahora que tenemos un div, dentro del cual hay una imagen. Al div le asignaremos un borde, y a la imagen por ahora no le asignaremos la propiedad float.

Veamos cómo se verá esto en el navegador:

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

div {
	border: 1px solid red;
}

Ahora asignemos a la imagen la propiedad float con el valor left. En este caso, ocurrirá algo sorprendente: la altura del padre desaparecerá, su borde inferior comenzará inmediatamente después del superior, y la imagen sobresaldrá por debajo de su elemento padre:

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

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

Resulta que los elementos a los que se les asigna la propiedad float, no expanden la altura de su elemento padre.

Cambiemos el valor de la propiedad float de left a right. El comportamiento del padre no cambiará, pero la imagen comenzará a flotar a la derecha:

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

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