macete do clearfix

Há algo ruim que pode acontecer quando se utiliza elementos flutuantes:

img {
  float: right;
}

<div>

Ops... esta imagem é maior do que o elemento que a contém, e é por isso que ela estoura os limites dele.!

Relaxa. Existe uma maneira de corrigir isto, mas é feio. É chamado macete do clearfix.

Vamos tentar adicionar esse novo CSS:

.clearfix {
  overflow: auto;
}

Agora vamos ver o que acontece:

<div class="clearfix">

Bem melhor!

Isso funciona para navegadores modernos. Se você precisa dar suporte ao IE6, adicione o seguinte:

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

Existem outros navegadores exóticos que exigem uma atenção extra. O mundo do "clearfixing" é bem assustador, mas esta solução simples irá trabalhar para a grande maioria dos navegadores atuais.