Dicas para trabalhar com a propriedade float do CSS

Veja neste artigo dicas úteis para deixar de quebrar a cabeça com a propriedade float do CSS.

Ainda hoje, em pleno século XXI, é comum em sites de grandes agências nos depararmos com algumas "gambiarras" no código CSS, sejam elas para limpar floats de determinado elemento, posicionar algum elemento, etc.

Um caso muito comum é quando queremos limpar determinado float de duas divisórias (div) para que seu pai tenha a altura propagada.

Vejamos isso na prática!

Antes de mais nada, vale a pena darmos uma relembrada na propriedade float do CSS.

O que é float e para que serve?

Float é uma propriedade CSS que usamos para posicionar algo na tela, seja um elemento em bloco ou em linha.

Com a propriedade float definida, um elemento pode ser empurrado para esquerda ou para a direita, permitindo que os outros elementos possam organizar em torno dele.

Observação: um elemento com um posicionamento absolute ignora totalmente a propriedade float.

Imagine o seguinte exemplo: você está estruturando uma página HTML5 com duas colunas onde o fundo do conteúdo está personalizado. Dentro da seção (section) onde está o fundo do conteúdo, você tem um artigo (article) que ficará posicionado na parte direita da seção e um aside que ficará posicionado na parte esquerda da seção, conforme mostra a imagem abaixo:


Figura 1: Article sem overflow

Ao se deparar com isto, é comum os desenvolvedores aplicarem a configuração float:left no aside e float:right no article. Só que apenas isto não é o suficiente, pois iríamos nos deparar com a seguinte situação (veja na Figura 2).

Observação: a seção (section) está com uma altura mínima de 100px (min-height:100px).


Figura 2: Article flutuando

Isto acontece porque a seção não está considerando as tags que estão flutuando como filhos. Este foi um dos principais fatores da tabela ainda ter sido usada antigamente para corrigir estes bugs.

É comum ver alguns desenvolvedores procedendo da seguinte forma para que a altura da seção aumente:

Listagem 1: Estrutura html5, para o aumento do conteúdo da seção

<style> * {margin: 0; padding: 0;} section {padding-top: 1px; min-height: 100px; width: 920px; margin: 20px auto; background: #ccc; box-shadow: 0 0 3px #000;} aside {float: left; margin-right: 10px; background: yellow; width: 300px; height: 200px; margin-top: 10px; margin-left: 10px;} article {float:left;background: red; width: 600px; height: 600px; margin-top: 10px;} div {clear:both;} </style> <section> <aside><h1>ASIDE</h1></aside> <article><h2>ARTICLE</h2></article> <div></div> </section>

Veja na imagem abaixo o resultado do código acima:


Figura 3: Divisória limpando os floats da seção

Realmente o estilo está inline, o que é errado, mas estamos presenciando um exemplo demonstrativo.

Poderíamos obter o mesmo resultado sem o uso da divisória, apenas adicionando a propriedade CSS overflow:hidden no article.

Listagem 2: Article com a propriedade overflow:hidden

<styletype="text/css"> * {margin: 0; padding: 0;} section {padding-top: 1px; min-height: 100px; width: 920px; margin: 20px auto; background: #ccc; box-shadow: 0 0 3px #000;} aside {float:left; margin-right: 10px; background: yellow; width: 300px; height: 200px; margin-top: 10px; margin-left: 10px;} article {overflow:hidden;background: red; width: 600px; height: 600px; margin-top: 10px;} </style> <body> <section> <aside><h1>ASIDE</h1></aside> <article><h2>ARTICLE</h2></article> </section> </body>

A figura abaixo ilustra o resultado da aplicação do código acima.


Figura 4: Article com a propiedade overflow

Nota: caso quisermos afastar o "article" da lateral esquerda, ao invés de exagerarmos no margin-left do article, pois ele considera a margem em relação à seção e não ao "aside", poderíamos colocar uma margin-right no "aside" que iríamos obter o mesmo efeito.

Com a chegada do CSS3, temos as propriedades overflow-x e overflow-y.

Vejamos um exemplo de overflow-x e overflw-y na prática:

Listagem 3: propiedade overflow-y

<style> * {margin: 0; padding: 0;} section {padding-top: 1px; height: 200px; width: 120px; margin: 20px auto; background: #ccc; box-shadow: 0 0 3px #000;overflow-y:auto;} </style> <body> <section> <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p> </section> </body>

Figura 5: Exemplo de um elemento com overflow-y

Ao invés do overflow-y, poderíamos ter colocado overflow-x e teríamos a seguinte visualização:

Listagem 4: propiedade overflow-x

<styletype="text/css"> * {margin: 0; padding: 0;} section {padding-top: 1px; height: 200px; width: 120px; margin: 20px auto; background: #ccc; box-shadow: 0 0 3px #000;overflow-x:scroll;} p { width: 1000px;} </style> <body> <section> <p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p> </section> </body>

Visualização:


Figura 6: Exemplo de um elemento com overflow-x

Isto nos ajuda a desenvolver nosso trabalho de forma mais inteligente e prática no dia-a-dia.

Espero que estas dicas tenham lhe ajudado, poupando seu trabalho e futuras dores de cabeça.

Abraços.

Artigos relacionados