Isso vai servir para você atualmente (IE 8 e superior):
.group:after ( content: ""; display: table; clear: both; )Aplique-o a qualquer elemento pai no qual você precise limpar os flutuadores. Por exemplo:
Você usaria isso em vez de limpar o float com algo como overflow: hidden;no pai (você nem sempre deseja ocultar o estouro )
Agora um pouco de história!
Esta era a versão popular original, projetada para oferecer suporte aos navegadores desde o início:
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack \*/ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */Então, havia uma versão um pouco mais limpa documentada aqui por Jeff Starr, baseada no fato de que ninguém usa o Internet Explorer para Mac, que é o motivo do hack de barra invertida.
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) * html .clearfix ( zoom: 1; ) /* IE6 */ *:first-child+html .clearfix ( zoom: 1; ) /* IE7 */Depois, tornou-se popular usar “grupo” como um nome de classe, que é mais agradável e semântico (via Dan Cederholm). Além disso, a contentpropriedade nem precisa de espaço, pode ser uma string vazia (via Nicolas Gallagher). Então, sem nenhum texto, font-sizeé desnecessário (Chris Coyier).
.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */Claro, se você descartar o suporte ao IE 6 ou 7, remova as linhas associadas.
Atualização de 18 de maio de 2011: Nicolas Gallagher novamente com o “micro” clearfix. Veja também essas coisas adicionais..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Veja o topo desta página para a versão mais moderna do clearfix.
No futuro, talvez possamos fazer:
.group ( display: flow-root; )