float

A propriedade float 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 de float é diferente de none.

Como float implica o uso the block layout, ele modifica o valor computado de display em alguns casos:

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-start Experimental

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

inline-end Experimental

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

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

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

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

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óprio box 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.

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 os floats, 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 dois boxes vermelhos. Muito provavelmente, queremos que o próximo título seja alinhado à esquerda. Para conseguir isso, precisamos limpar os floats.

O jeito mais simples de limpar os floats neste exemplo é adicionar a propriedade clear 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 mesmo block formatting context (en-US) aos quais nós queiramos que o cabeçalho continue aparecendo ao lado horizontalmente. Se o nosso H2 possui irmãos os quais são barras laterais flutuadas à esquerda e à direita, usar clear irá forçá-lo a aparecer abaixo das duas barras laterais, o que provavelmente não é o que queríamos.

Se limpar floats 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 paragrafo P . Nós podemos atribuir a propiedade overflow neste paragrafo para hidden ou auto 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;
}

• Block formatting context (en-US)