o hack do clearfix

Aqui está uma coisa estranha, má que pode ocorrer quando se utilizam flutuadores:

img {
  float: right;
}

<div>

Uh oh... esta imagem é mais alta que o elemento que a contem, e está a flutuar, então está a sair para fora do seu recipiente!

Boo. Existe uma maneira de corrigir isto, mas é feia. Chama-se clearfix hack.

Vamos tentar adicionar este novo CSS:

.clearfix {
  overflow: auto;
}

Agora vamos ver o que acontece:

<div class="clearfix">

Muito melhor!

Isto funciona com browsers modernos. Se quiseres suportar IE6, vais querer adicionar o seguinte:

.clearfix {
  overflow: auto;
  zoom: 1;
}

Existem browsers exóticos que podem necessitar atenção extra. O mundo de clearfixing é bastante assustador, mas esta solução simples funcionará para a grande maioria dos browsers de hoje em dia.