<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!
Aqui está uma coisa estranha, má que pode ocorrer quando se utilizam flutuadores:
img {
float: right;
}
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:
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.