[css] clearing floats

rev087 — Sun, 09 Mar 2008 06:29:46 +0000

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 :)

[css] min-height hack

rev087 — Wed, 21 Mar 2007 12:23:05 +0000

Hacks são necessários, mas sujar o html realmente não me deixa satisfeito. E um dos muitos problemas que nosso amigo IE(ca)6 tem com CSS é a propriedade min-height. Simplesmente não está implementada. Mesmo porque para o IE, o comportamento que deveria ser seguido com min-height é o padrão para qualquer elemento com uma height definida (graças á implementação incorreta da propriedade overflow…). Procurando por uma solução decente, a que me pareceu melhor foi a apresentada por Dustin Diaz:

selector {
  min-height:500px;
  height:auto !important;
  height:500px;
}

Funciona assim: o IE6 tambem não implementa corretamente a declaração !important, e vai sobrescrever a declaração de height:auto com height:500px, “emulando” a propriedade min-height:500px. Todos os browsers modernos vão seguir a declaração height:auto !important, mantendo min-height:500px à salvo. Nasty. A brincadeira funciona no IE6, Mozilla/Firefox/Gecko, Opera 7.x+, Safari1.2. Nada de IE5.x, infelizmente. (quem liga? eu com certeza não! :P)

Vault7 » code

[css] clearing floats

[css] min-height hack