Resumo

A propriedadefloat do CSS determina que um elemento deve ser retirado do seu fluxo normal e colocado ao longo do lado direito ou esquerdo do seu containêr, onde textos e elementos em linha irão se posicionar ao seu redor.

Um elemento flutuante é um tipo de elemento cujo valor defloat é diferente denone.

Comofloat implica o uso theblock layout, ele modifica o valor computado dedisplay em alguns casos:

Sintaxe

float: left;float: right;float: none;float: inline-start;float: inline-end;/* Global values */float: inherit;float: initial;float: unset;

Valores

left

É uma palavra-chave que indica que o elemento deve flutuar à esquerda do bloco.

right

É uma palavra-chave que indica que o elemento deve flutuar à direita do bloco.

none

É uma palavra-chave que indica que o elemtno não deve flutuar.

inline-startExperimental

É uma palavra-chave que indica que o elemento deve flutuar no lado inicial do seu bloco, ou seja, o lado esquerdo em scriptsltr e no direito em scriptsrtl.

inline-endExperimental

É uma palavra-chave que indica que o elemento deve flutuar no lado final do seu bloco, ou seja, o lado direito em scriptsltr e no esquerdo em scriptsrtl.

Sintaxe Formal

float =
block-start|
block-end|
inline-start|
inline-end|
snap-block|
<snap-block()>|
snap-inline|
<snap-inline()>|
left|
right|
top|
bottom|
none|
footnote

<snap-block()> =
snap-block(<length> ,[start|end|near]?)

<snap-inline()> =
snap-inline(<length> ,[left|right|near]?)

Exemplos

CSS

div {  border: solid red;  max-width: 70ex;}h4 {  float: left;  margin: 0;}

HTML

<div>  <h4>HELLO!</h4>  This is some text. This is some text. This is some text. This is some text.  This is some text. This is some text. This is some text. This is some text.  This is some text. This is some text. This is some text. This is some text.</div>

Comofloats são posicionados

Como mencionado acima, quando um elemento é flutuado ele é retirado do seu fluxo normal no documento. Ele é reposicionado à esquerda ou à direita até tocar a borda do seu própriobox ou outro elemento flutuante.

Na imagem abaixo, existem 3 quadrados vermelho. Dois flutuando à esquerda e um flutuando à direita. Observe que o segundo quadrado vermelho à esquerda é posicionado à direita do primeiro. Quadrados adicionais poderiam continuar sendo empilhados à direita até que eles completassem o box, após isso eles iriam para próxima linha.

Limpandofloats

No exemplo abaixo, os elementos flutuantes são menores verticalmente que o bloco de texto com os quais estão flutuando. Apesar disso, se o texto não fosse comprido o bastante para passar abaixo do limite inferior de todos osfloats, nos veríamos efeitos não previstos. Se o parágrafo abaixo, por enquanto, somente lê "Lorem ipsum dolor sit amet,", e fosse seguido por outro cabeçalho do mesmo estilo de cabeçaljo "Floats Example", o segundo cabeçalho iria aparecer entre os doisboxes vermelhos. Muito provavelmente, queremos que o próximo título seja alinhado à esquerda. Para conseguir isso, precisamos limpar osfloats.

O jeito mais simples de limpar os floats neste exemplo é adicionar a propriedadeclear para o próximo cabeçalho que queremos assegurar que esteja alinhado à esquerda.

h2.secondHeading {  clear: both;}

Porém, este método apenas funciona se não existirem outros elementos com o mesmoblock formatting context aos quais nós queiramos que o cabeçalho continue aparecendo ao lado horizontalmente. Se o nossoH2 possui irmãos os quais são barras laterais flutuadas à esquerda e à direita, usarclear irá forçá-lo a aparecer abaixo das duas barras laterais, o que provavelmente não é o que queríamos.

Se limparfloats em um elemento não é uma opção, uma outra abordagem é limitar o contexto de formatação do bloco do containêr flutuante. Referindo-se ao exemplo acima novamente, aparentemente todos os três quadrados vermelhos possuem um elemento paragrafoP . Nós podemos atribuir a propiedadeoverflow neste paragrafo parahidden ouauto para obrigá-lo a expandir para contê-los, porém não permitirá que os mesmos parágrafos pulem fora do limite inferior.

p.withRedBoxes {  overflow: hidden;  height: auto;}

Especificações

Compatibilidade com navegadores

Veja também

• Block formatting context