Um problema comum que vi muitos desenvolvedores encontrarem ocorre quando a altura de um objeto flutuante excede a do resto do conteúdo. O contêiner está de acordo com a altura do conteúdo, excluindo o objeto flutuante:
Como visto acima, a intenção do desenvolvedor era ter o fundo verde em volta da imagem e do texto, mas a imagem acabou transbordando. A aparência desejada é:
O que aconteceu? Como a imagem é flutuante, ela é retirada do fluxo normal de documentos. Neste contexto, não ocupa nenhum espaço.
Não há necessidade de recorrer a contêineres de altura fixa ou uso de mesas ainda. Existem soluções alternativas!
Método 1: adicione “overflow: hidden” ao contêiner. ( demonstração ao vivo )
<div style="background:#557755;padding:5px;overflow: hidden">
<img style="float:left;margin:5px" src="michael_jackson.jpg" alt="Michael Jackson">
<b>Top 5 Michael Jackson Songs</b><br>
5. Beat it<br>
4. Billie Jean<br>
3. Black or White<br>
2. Man in the Mirror<br>
1. Thriller
</div>Método 2: adicione um objeto de compensação de altura 0 ao fluxo. ( demonstração ao vivo )
<div style="background:#557755;padding:5px">
<img style="float:left;margin:5px" src="michael_jackson.jpg" alt="Michael Jackson">
<b>Top 5 Michael Jackson Songs</b><br>
5. Beat it<br>
4. Billie Jean<br>
3. Black or White<br>
2. Man in the Mirror<br>
1. Thriller
<div style="clear: both; line-height: 0; height: 0;"> </div>
</div>Dos dois, o método 1 é mais simples de implementar, mas descobri que o método 2 tem uma taxa de sucesso mais alta com menos conflitos de CSS e funciona com o infame IE6. Na maioria dos casos, o método 1 deve ser suficiente, mas mantenha o método 2 acessível para aqueles poucos casos em que não é.