Como Criar Sites | Aprenda grátis como fazer seu site

Vamos ver como funciona o estilo float (style float) e algumas dicas para que ele possa ser utilizado corretamente. Ele serve para dizer onde o elemento vai “flutuar” na página. Isso é usado em elementos do tipo bloco (block – como <div>, <p>, <img> e outros) para faze-lo ficar exatamente onde você quiser, sem precisar usar tabela (tableless). Para uma renderização correta do elemento com o estilo float, o mesmo deve ter especificado a sua largura (width).

Valores para o Estilo Float

Os valores para o estilo float podem ser:

none

- Esse é o valor definido para o elemento não “flutuar” para lado algum. Você não precisa colocar esse estilo se você desejar esse valor.

left

- Esse valor faz o elemento “flutuar” a esquerda, deixando qualquer outro elemento a direita desse elemento.

right

- Esse valor faz o elemento “flutuar” a direita, deixando qualquer outro elemento a esquerda desse elemento.

Existem outros valores para o estilo float, mas normalmente são irrelevantes e quase nunca, se não nunca, serão usados, pelo menos eu nunca vi.

O estilo float faz o elemento se sobrepor aos outros elemento da página. Ele também faz o elemento meio que flutuar na página, podendo gerar alguns erros no fluxo dos elementos da página. Nós veremos algumas dicas para corrigir esses erros no final desse post.

Exemplificando o Estilo Float

Agora vou colocar um exemplo do código para o estilo float. Para ver os exemplos abaixo funcionando entre em Exemplo de Estilo Float. Primeiro um exemplo do elemento sem o float.

Sem Float

<div style="width: 200px; min-height: 50px; border: 1px solid black;">
	<div style="width: 50px; height: 50px; background-color: blue;"></div>
	<div style="width: 50px; height: 50px; background-color: red;"></div>
</div>

Esse é o exemplo para você ver como seria exibido os elementos sem o estilo float. Ele desenha um retângulo com dois quadrados dentro, só que esses quadrados estão exibidos um embaixo do outro.

Float Left

<div style="width: 200px; height: 50px; border: 1px solid black;">
	<div style="float: left; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: left; width: 50px; height: 50px; background-color: red;"></div>
</div>

Nesse exemplo temos o mesmo retângulo, só que os quadrados internos dele estão com o estilo float: left e vemos que não há quebra de linha entre os elementos e todos estão alinhados a esquerda.

Float Right

<div style="width: 200px; height: 50px; border: 1px solid black;">
	<div style="float: right; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: right; width: 50px; height: 50px; background-color: red;"></div>
</div>

Nesse exemplo temos quase a mesma coisa do exemplo passado, só que os elementos internos estão alinhados a direita, porque temos o estilo float: right nos elementos internos.

Float Left-Right

<div style="width: 200px; height: 50px; border: 1px solid black;">
	<div style="float: left; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: right; width: 50px; height: 50px; background-color: red;"></div>
</div>

Esse exemplo é para mostrar como podemos colocar na mesma linha dois elementos sem usar tabela, para isso usamos em um elemento o estilo float: left e no outro o estilo float: right.

Dicas para Resolver Problemas com o Estilo Float

Umas das propriedades de elementos que utilizam o estilo float é que ele não ajusta a altura do elemento pai de acordo com a sua altura. Veja esses exemplos funcionando em Exemplo Estilo Float Manha. E vamos ao código:

Float sem Ajuste de Altura

<div style="width: 200px; height: 50px; border: 1px solid black; background-color: yellow;">
	<div style="float: left; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: left; width: 50px; height: 75px; background-color: red;"></div>
</div>
<div style="width: 200px; height: 50px; border: 1px solid black; background-color: gray;"></div>

Nesse exemplo temos um elemento pai, que é um retângulo, com dois elementos filhos dentro, mas um dos elementos filhos está com a altura (height) maior que a do elemento pai, e como esse elemento filho está com o estilo float definido, o elemento pai não vai cobrir todo o elemento filho, então o elemento filho vai ficar uma parte fora do elemento pai. Logo embaixo existe outro elemento que deveria ficar após a altura total do elemento mais alto dos elementos anteriores a ele, só que não acontece, e o elemento filho acima, que tem altura maior, fica sobre o elemento que está mais abaixo no esquema.

Float com Ajuste de Altura por Estilo Clear

<div style="width: 200px; min-height: 50px; border: 1px solid black; background-color: yellow;">
	<div style="float: left; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: left; width: 50px; height: 75px; background-color: red;"></div>
	<div style="clear: both;"></div>
</div>
<div style="width: 200px; height: 50px; border: 1px solid black; background-color: gray;"></div>

Para corrigir o ajuste de altura, temos algumas técnicas, mas a técnica exemplificada foi a de limpar (clear) o estilo float no final do elemento pai, para ser ajustada a altura dele corretamente. Isso normalmente é feito colocando em uma tag <div> o estilo clear: both. Você pode também criar uma classe com o estilo clear: both e atribuir essa classe a um elemento sempre que você precisar limpar o float.

div.limpar {
	clear: both;
}

<div class="limpar"></div>

Para saber mais sobre o estilo clear acesse Estilo Clear (CSS Style Clear).

Se você colocar o <div> com o estilo clear: both após o fechamento do elemento pai, o próximo elemento vai ficar corretamente posicionado, mas o elemento pai ainda vai ficar com a altura errada.

Float com Ajuste de Altura por Estilo Overflow

Outro ajuste para fixar a altura correta é colocar o estilo overflow: auto no elemento pai. Ele vai se ajustar automaticamente a altura dos elemento filhos. Mas essa técnica não é muito interessante já que se você quiser utilizar o estilo overflow do elemento pai para algum outro propósito não vai poder.

Se você quiser saber mais sobre o estilo overflow acesse Estilo Overflow (CSS Style Overflow).

Float com Ajuste de Altura por Pseudo Elemento After

Existe uma técnica que chama mais atenção por ser teoricamente melhor, porém é um pouco mais complexa, que é a técnica chamada clearfix, que consiste em fazer o clear com o pseudo elemento after, para os navegadores que tem esse pseudo elemento, e para o IE antigo, que não suporta o pseudo elemento after, fazer com que o elemento pai tenha a propriedade hasLayout. Para o elemento ter a propriedade hasLayout basta colocar o estilo zoom: 1 nele.

Vamos ao código:

<style type="text/css">

.clearfix {display: inline-block;} /* isso serve para IE/Mac */

.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	font-size: 0;
	visibility: hidden;
}

* html .clearfix { zoom: 1; }
.clearfix { display: block; }

</style>

<div style="width: 200px; min-height: 50px; border: 1px solid black; background-color: yellow;" class="clearfix">
	<div style="float: left; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: left; width: 50px; height: 75px; background-color: red;"></div>
</div>
<div style="width: 200px; height: 50px; border: 1px solid black; background-color: gray;"></div>

Como pode ver no código acima, a técnica consiste em aplicar uma classe que tenha o pseudo elemento after, no elemento pai dos elementos que irão “flutuar” na página. O pseudo elemento after coloca um espaço logo após o elemento pai, mas coloca ele invisível e com a propriedade clear: both. Os elementos de cima da folha de estilos servem para ajeitar esse bug no IE/Mac e os de baixo servem para antigas versões do IE.

Para saber mais sobre o pseudo elemento after entre em CSS Pseudo Elementos: First-Letter, First-Line, Before e After.

Outras Técnicas

Uma outra técnica menos abordada é dar ao elemento pai o estilo display: table, mas acho que essa técnica não é muito boa, porque utiliza um estilo que nós podemos querer utilizar para outros fins. Essa técnica é abordada no site CSS: Truques para dominar a propriedade Float, mas sem muitas explicações de por que essa técnica funciona.

Para saber mais sobre as outras técnicas de posicionamento, leia CSS float: considerações, dicas e macetes para bons layouts na web e How To Clear Floats Without Structural Markup.

E para corrigir algum bug do IE com relação a margem colocada na mesma direção qual o elemento flutue, veja Bug Fix: IE Double Margin Float Bug.

Para criação e hospedagem profissional de websites e sistemas, acesse Panasoft.