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.

Se você quer saber como utilizar um pseudo elemento, é como utilizar uma pseudo classe, acesse Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.

Pseudo Elemento First-Letter

O pseudo elemento first-letter é utilizado para colocar na primeira letra do elemento um estilo especificado. Exemplo:

<style type="text/css">
.fletter:first-letter {
	font-size: 30px;
}
</style>

<div class="fletter">Primeira letra vai ser maior que a outras.</div>

Nesse exemplo a primeira letra do texto dentro do <div> terá o tamanho de 30 pixels. Você pode ver esse exemplo funcionando em Pseudo Elemento – First-Letter e First-Line.

O pseudo elemento first-letter somente funciona com elementos de bloco e também somente funcionam alguns estilos, como: propriedades de fonte, propriedades de cor, propriedades de fundo (background), propriedades de margens, propriedades de padding (sabe lá como se traduz isso), propriedades de bordas, text-decoration, vertical-align (se o estilo for float: none), text-transform, line-height, float e clear.

Pseudo Elemento First-Line

O pseudo elemento first-line é utilizado para colocar na primeira linha do elemento um estilo especificado. Exemplo:

<style type="text/css">
.fline {
	width: 200px;
}
.fline:first-line {
	font-size: 30px;
}
</style>

<div class="fline">Primeira linha vai ser maior que a outras.</div>

No exemplo acima, a primeira linha do texto dentro do <div> terá o tamanho de 30 pixels. Você pode ver esse exemplo funcionando em Pseudo Elemento – First-Letter e First-Line.

O pseudo elemento first-line funciona somente em elementos de bloco e com os mesmos estilos especificados na parte do first-letter.

Pseudo Elemento Before

O pseudo elemento before adiciona algum conteúdo antes do elemento ao qual ele é definido. Exemplo:

<style type="text/css">
.clabef:before {
	content: 'P: ';
}
</style>

<div class="clabef">Antes de qualquer conteúdo do elemento entra o que tem no before.</div>
<div class="clabef">Antes de qualquer conteúdo do elemento entra o que tem no before.</div>
<div class="clabef">Antes de qualquer conteúdo do elemento entra o que tem no before.</div>

Nesse exemplo vai sempre haver um “P: “ antes do conteúdo de cada <div>. Você pode ver esse exemplo funcionando em Pseudo Elemento – Before e After.

Pseudo Elemento After

O pseudo elemento after adiciona algum conteúdo depois do elemento ao qual ele é definido. Exemplo:

<style type="text/css">
.claaft:after {
	content: '.';
}
</style>

<div class="claaft">Depois de qualquer conteúdo do elemento entra o que tem no after</div>
<div class="claaft">Depois de qualquer conteúdo do elemento entra o que tem no after</div>
<div class="claaft">Depois de qualquer conteúdo do elemento entra o que tem no after</div>

Nesse exemplo vai sempre haver um “.” depois do conteúdo de cada <div>. Você pode ver esse exemplo funcionando em Pseudo Elemento – Before e After.