NumClique – Estilo de vida digital

Um dos bugs mais estranhos e odiados entre os desenvolvedores WebStandards é o do float no Firefox. A história é típica:

Você tem uma div#pai com um fundo (de cor ou imagem) e nela, duas div’s #filho com float. O primeiro problema que você vai reparar é que a div#pai não “estica” conforme as div’s #filho crescem, e então o fundo não vai aparecer. Veja o exemplo.

Você fuça, fuça e fuça, até que descobre que colocando display:table na div#pai, ela vai esticar certinho! Maravilha! Tudo funcionando e o site vai pro ar.

Só que aí que começa o verdadeiro problema: Você acessa o site e as div’s filhas ficam “quebradas”, uma embaixo da outra, como se o float não estivesse funcionando. Aí vc dá F5 para atualizar a página, e as div’s voltam pro lugar! Veja o exemplo.

Daí surgiram diversas teorias, entre as quais uma que diz que depende da força com que você aperta o F5, porque as div’s são sentimentais

Em uma discussão no fórum Webly, descobrimos que colocando uma div “fantasma” com clear:both logo no final das div’s #filhas e retirando o display:table o problema estava resolvido! Inclusive o Micox fez um post sobre essa solução.

Porém, todos nós sabemos que adicionar marcação desnecessária no seu HTML, não é uma prática profissional, é apenas uma gambiarra, para solucionar um problema que não entendemos.

Baseado na idéia da “div fantasma” e baseado nos pseudo-elementos (que o Firefox aceita) desenvolvi uma solução que não agride o meio ambiente, digo, não interfere no seu HTML:

		div#pai:after{
		    content:".";
		    display:block;
		    clear:both;
		    visibility:hidden;
		    height:0;
		    overflow:hidden;
		}

Explico. Nessa declaração você diz que logo depois da div#pai será inserido um “.” e que ele deve ter o mesmo clear:both que tínhamos na “div fantasma”. Ainda, fazemos com que ele não apareça e não ocupe espaço na tela, para não ter problema com seu layout tão bonito

Eu suma, simulamos o que a div fantasma fazia, só que sem mexer no seu HTML, isso se chama profissionalismo! Veja a solução.

Um grande abraço a todos =)

Este tutorial foi escrito por André Gazola

Dica do Rafael Dourado (@rdourado), via twitter