CSS: Truques para dominar a propriedade Float

O float é uma propriedade meio imprevisível no CSS. Este é um tutorial explicando passo-a-passo o seu funcionamento com alguns macetes que você não encontrará em nenhum site de referência CSS.

Para começar, vou usar uma estrutura Html simples com 3 tags Div:

<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>

O Float é uma propriedade que faz o objeto flutuar à esquerda ou à direita do restante do conteúdo. Se quisermos o menu à esquerda e o conteúdo à direita, o que os desenvolvedores geralmente fazem é:

.menu { float: left; width: 30%; }
.conteudo { float: right; width: 60%; }

Mas isso pode gerar uma série de dores de cabeça mais a frente no desenvolvimento. Vamos estudar o que pode dar errado e entender o porquê.

Macetes que ninguém ensinará para você

Esta técnica gera – principalmente no Internet Explorer – 2 erros de renderização:

1. Float sobrepõe o resto do site

Note que a borda do div pai que chamamos de “tudo” não está acompanhando os divs internos (.menu e .conteudo).

Para forçar o div “tudo” a circular também os objetos com float, mude o seu modo de exibição para table desta forma:

.tudo { display: table; }

UPDATE: um hack que pode funcionar melhor que o display:table; é adicionar uma div com clear: both; depois de todos os divs flutuantes.

.clear { clear: both; }
<div class="clear"> </div>

Muito bom, agora que o seu float está integrado com o restante do conteúdo da maneira que você queria, falta o cheque-mate.

2. Float:right não alinha com o Float:left

Quem já encontrou este problema sabe o quanto é irritante. Em alguns casos, as colunas não ficam uma do lado da outra NUNCA, por mais que você tente.

Para corrigir isso devemos usar o Float da maneira correta. Ao invés de colocar float:left; no da esquerda e float:right; no da direita, colocamos apenas no da esquerda e deixamos o da direita alinhar naturalmente com um espaço de margem.

Veja como é simples:

.menu { float: left; width: 30%; }
.conteudo { margin-left: 30%; }

Veja o código combinado de html e css:

<!-- CSS -->
<style rel="stylesheet" type="text/css">
.tudo { display: table; }
.menu { float: left; width: 30%; }
.conteudo { margin-left: 35%; }
</style>

<!-- HTML -->
<div class="tudo">
<div class="menu">Menu</div>
<div class="conteudo">Conteúdo</div>
</div>

Finalmente, um float dentro dos padrões e funcionando em qualquer browser. A fera está domada!

Compartilhe: