O efeito de floats no elemento pai no CSS

Suponha agora que temos uma div, dentro da qual há uma imagem. Vamos definir uma borda para a div, e por enquanto não vamos definir a propriedade float para a imagem.

Vamos ver como isso ficará no navegador:

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

div {
	border: 1px solid red;
}

Agora, vamos definir a propriedade float para a imagem com o valor left. Neste caso, algo surpreendente acontecerá - a altura do elemento pai desaparecerá, sua borda inferior começará imediatamente após a superior, e a imagem vazará para fora do seu elemento pai pela parte inferior:

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

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

Assim, elementos aos quais é definida a propriedade float não expandem a altura do seu elemento pai.

Vamos alterar o valor da propriedade float de left para right. O comportamento do elemento pai não mudará, mas a imagem começará a flutuar para a direita:

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

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