Corrigindo a propriedade float via CSS

jun 10

Corrigindo a propriedade float via CSS

Meta Tags: CSS, hacks • por Gustavo Ribeiro

Quem nunca passou por problemas ao criar um menu, ou qualquer outra coisa que seja, utilizando a propriedade float? Pois é! Procurando sobre o que escrever nesse blog, resolvi deixar aqui uma solução para o problema da imagem abaixo.

A solução é bem simples. Quando temos um elemento pai contendo os filhos como float, o pai automaticamente não consegue acompanhar o tamanho total dos filhos. Para contornar o problema, faremos o seguinte:

Primeiro criaremos a classe clrfix com um pseudo-elemento :after para que ele possa atribuir nossas propriedades logo após o elemento (nesse caso, a nossa <ul>)

<style type="text/css">
    .clrfix:after {clear:both;display:block;visibility:hidden;height:0;content:".";}
    .clrfix {display: inline-block;}
</style>

Feito isso, iremos adicionar hacks para os famosos bugs do IE(ca) como abaixo

<style type="text/css">
    /* Hides from IE-mac \*/
    * html .clrfix {height: 1%;}
    .clrfix {display: block;}
    /* End hide from IE-mac */
</style>

Ao final, temos:

<style type="text/css">
    .clrfix:after {clear:both;display:block;visibility:hidden;height:0;content:".";}
    .clrfix {display: inline-block;}
    /* Hides from IE-mac \*/
    * html .clrfix {height: 1%;}
    .clrfix {display: block;}
    /* End hide from IE-mac */
</style>

Ok, ok… Não sei explicar muito bem né?
Então, por hoje é só!