Conteúdo
To clearfix or not to clearfix? (clique para ver os comentários)
Dom, 13 de Setembro de 2009
Embora o CSS seja uma linguagem de estilização de fácil compreensão, sempre tem algum truque interessante para aprender e que vá ajudar na hora de montar layouts de páginas Web, principalmente quando você quer chegar num resultado visual e com as propriedades normais da linguagem não é possível. (Alerta: evitem hacks, exceto quando se fazem realmente necessários!)
Um desses resultados desejados é margem superior de um elemento de exibição em bloco ("display: block"), mas tendo como referência a parte inferior do último elemento acima dele. O que acontece quando elementos dentro deste elemento de cima são postos a flutuar, com, digamos, um "float: left"? PAM! (Som de mensagem de erro do Ruindows) O elemento de cima pára de considerar a altura real dos elementos flutuantes e deixa de ser referência efetiva para a margem superior do elemento de baixo. Isto às vezes é um efeito muito indesejado, pois a caixa blocada é sobreposta pelos elementos flutuantes.
Existe uma primeira alternativa que funciona muito bem: é o famoso clearfix. Ele se apresenta de diversas maneiras, e o que costumo usar é um elemento blocado vazio com um mero "clear: both", pois, assim, este elemento não-flutuante é empurrado pelos flutuantes, e a caixa envoltória volta a considerar a altura composta por seus elementos internos. Esta solução é simples e fácil de entender quando encontrada, mas apresenta um problema: é preciso inserir um elemento extra na marcação, o que quebra a semântica do código de marcação.
No entanto, durante um papo após uma apresentação de produto que fiz na reunião de webmasters do UOL, recebi uma dica muito bacana de um amigo de lá, o Renato Rodrigues (salve, Ambi!): "overflow: auto". Só. Simples, funcional. Sem quebra de semântica. ;-)
Como funciona: você aplica esse par propriedade-valor no elemento contêiner dos flutuantes, e ele volta a considerar a altura composta por eles. Problema de margem superior do elemento abaixo resolvido.
Só que, ainda assim, é importante considerar uma coisa: você deve ter precaução usar este truque em conjunto com uma altura definida e fixa da caixa-contêiner, caso contrário ela passará a ter barras de rolagem - neste caso, é melhor se ater ao clearfix, mesmo... -.