Isso é notícia velha, mas me dói ver quantos ainda não receberam o memorando.
O uso de um div vazio com uma classe ‘clearfix’ deve terminar. Isso atrapalha a marcação significativa e é um pé no saco, se nada mais.
Aqui está um cenário simplificado e comum:
Seu HTML:
<div class="side-by-side">
<div>Floaty content</div>
<div>More floaty content</div>
</div>
Seu CSS:
.side-by-side {
background: #eee;
}
.side-by-side div {
float: left;
}
.side-by-side:after {
content: "";
display: block;
clear: both;
}
Queremos .side-by-side
estender até o final de seu conteúdo e não recolher como se estivesse vazio, então, em vez de adicionar um div clearfix como seu último nó filho, simplesmente adicionamos esta regra css usando o :after
seletor.
Preocupado com o suporte do navegador? O IE8 e os mais recentes lidam bem com isso e o IE7 e os mais antigos representam apenas 1,87% da população de navegadores.