Clearfix e altura do elemento pai em CSS

Vamos deixar uma div com a classe parent, remover o texto dela, deixando apenas a imagem flutuante. Como você já sabe, neste caso a altura da div colapsará para zero, restando apenas a borda superior e inferior. A imagem irá ultrapassar a nossa div pela parte de baixo:

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

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

Vamos fazer com que a imagem flutuante expanda a nossa div em altura. Para isso, usa-se um truque esperto - vamos colocar após a imagem uma div sem texto com a classe clearfix.

A nossa imagem é um elemento flutuante e não expande o elemento pai em altura, mas a div clearfix - não é flutuante e influencia a altura do pai.

Como à div clearfix foi atribuída a propriedade clear, o resultado será que ela será empurrada pela imagem para baixo e ficará posicionada abaixo dela, expandindo assim o elemento pai em altura.

A própria div clearfix é vazia e não é visível na tela, mas, mesmo assim, expande o elemento pai em altura.

Então, vamos tentar:

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