A Better Clearfix

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;
}

Veja em ação .

Queremos .side-by-sideestender 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 :afterseletor.

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.