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