Hack float no Firefox
18 de novembro de 2009 por Marcelo Alves
O Internet Explorer é o terror dos desenvolvedores web por causa dos seus inúmeros hacs css, porém esses bugs não são exclusividade do Internet Explorer, todos os browsers tem lá as suas particularidades.
Hoje falaremos de um problema que costuma tirar o sono dos webdesigners, principalmente porque ele ocorre no Firefox e não no Internet Explore. Trata-se do mau funcionamento das DIVs quando se usa a instrução “float” no css.
No Firefox, quando setamos o “float”, seja para esquerda ou para a direita, em uma DIV a DIV que a contém, a DIV pai, não se expande, ou seja, a DIV filha não empurra a DIV pai quebrando o layout.
Na verdade, o que ocorre é que a DIV filha comporta-se como se tivesse sido posicionada de forma absoluta, por isso a DIV que a contém não a acompanha.
Se há um elemento no layout que se posiciona logo abaixo do elemento flutuado, basta usar a instrução “clear” que o problema é resolvido. Porém, nem sempre há um elemento na sequência que nos permita usar a instrução.
Quando isso ocorre, temos duas opções: usar uma gambiarra no código da página ou resolver o problema de forma profissional com uma simples instrução, como mostraremos a seguir.
Neste artigo, estamos usando o elemento DIV como elemento flutuante, mas o hack e a solução se aplica para qualquer elemento flutuado no código.
No HTML temos:
<div id=”pai”>
<div id=”filha”></div>
</div>
No CSS:
#pai{
configurações do elemento
}
#filha{
float:left;
}
/* hack para o Firefox */
#pai:after{
content:”.”;
display:block;
clear:both;
visibility:hidden;
height:0;
overflow:hidden;
}
Esta instrução faz com que logo após a DIV pai seja inserido um “.” invisÃvel configurado com “clear:both”, isso fará com que a DIV pai cresça junto com a DIV filha. Vale lembrar que esse bloco de código não é interpetado pelo Internet Explorer, pois esse browser não reconhece o atributo :after, logo o seu layot não será afetado.
