[css] clearing floats

1rev087 • 8th Mar 2008 • code • css, hack, layout

Um problema muito comum em layouts usando a propriedade float é quando o “container” não se estica para acomodar as floats. Há muitas maneiras de se resolver isso, mas a maioria inclui código adicional no html, geralmente uma div com clear:both ao fim do container. Mas todos nós sabemos que bagunçar o html com tags inúteis deixa a tia Semântica muito chateada. Assim, a minha solução preferida, bolada por Tony Aslett (fundador do site csscreator.com) consiste em adicionar um conteúdo “virtual” ao final do container usando no seletor a pseudo-classe :after, e aplicar o clear:both nele, mais algumas linhas para esconder este conteúdo, e impedir que este ocupe espaço no layout. Segue o código:

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

No trecho de css acima, estamos adicionando um ponto (content:".") no final do container identificado pela classe clearfix, setando sua propriedade clear:both e escondendo-o do layout. Funciona em qualquer browser…bom, menos no nosso querido IEca. Você não achou que ia ser fácil assim, não é? Mas com mais algumas linhas, resolvemos o problema:

/* fix para o IE7 */
*+html .clearfix {
  min-height: 1%;
}

/* fix para o  IE6 */
* html .clearfix {
  height: 1%;
  overflow: visible;
}

/* fix para o resto do mundo */
.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

E é isso. Não tenha medo das floats, elas são suas amigas :)