Clearfix y la altura del padre en CSS

Dejemos un div con la clase parent, eliminemos el texto de él, dejando solo la imagen flotante. Como ya saben, en este caso la altura del div colapsará a cero, de él quedará solo el borde superior e inferior. La imagen sobresaldrá de nuestro div por la parte inferior:

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

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

Hagamos que la imagen flotante expanda nuestro div en altura. Para esto se usa un truco ingenioso: coloquemos después de la imagen un div sin texto con la clase clearfix.

Nuestra imagen es un elemento flotante y no expande al padre en altura, pero el div-clearfix - no es flotante y afecta la altura del padre.

Como al div-clearfix se le da la propiedad clear, resultarà que èl serà empujado por la imagen hacia abajo y se colocarà debajo de ella, expandiendo asì al padre en altura.

El div-clearfix en sì està vacìo y no es visible en la pantalla, pero al mismo tiempo expande al padre en altura.

Así que, intentémoslo:

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

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

.clearfix {
	clear: both;
}