Artigos HTML e CSS Dicas para trabalhar 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:

Article sem overflow

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).

Article Flutuando

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:

Divisória limpando os floats da seção

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.

Article com a propiedade overflow

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.

  • overflow-y: Impede os elementos filhos "transbordarem" na vertical.
  • overflow-x: Impede os elementos filhos "transbordarem" na horizontal.

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>
Exemplo de um elemento com overflow-y

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:

Exemplo de um elemento com overflow-x

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.