Vault7">

Um problema muito comum em layouts usando a propriedade é 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 com 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 , e aplicar o 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 () no final do container identificado pela classe , setando sua propriedade 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 :)

tags: css, hack, layout