A floatpropriedade em CSS é usada para posicionamento e layout em páginas da web. Um uso comum seria posicionar uma imagem em um dos lados e permitir que o texto se ajuste ao redor dela.

.intro-img {
  float: left;
}

Sintaxe

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 ]? )  

• Valor inicial: none
• Aplica-se a: todos os elementos, mas não tem efeito se o valor de  display for  none.
• Herdado: não
• Valor calculado: conforme especificado
• Tipo de animação: discreta

Valores

/* Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;

• noneO elemento não flutua. Este é o valor inicial.
• left: posiciona o elemento à esquerda do seu contêiner.
• right: posiciona o elemento à direita do seu contêiner.
• inline-start: o equivalente lógico de leftbaseado em writing-mode.
• inline-end: o equivalente lógico de rightbaseado em writing-mode.

Um elemento que está flutuando é automaticamentedisplay: block;

O que significa “flutuar”?

Para entender o propósito e a origem do texto floatem branco, podemos observar o design gráfico para impressão. Em um layout impresso, as imagens podem ser inseridas na página de forma que o texto se ajuste ao redor delas conforme necessário. Isso é comumente e apropriadamente chamado de “encaixe de texto”. Aqui está um exemplo disso.

Em programas de diagramação, as caixas que contêm o texto podem ser configuradas para respeitar ou ignorar a quebra automática de texto. Ignorar a quebra automática permite que as palavras fluam sobre a imagem como se ela nem existisse. Essa é a diferença entre a imagem fazer parte do fluxo da página (ou não). O design web é muito semelhante.

Em design web, elementos da página com a floatpropriedade CSS `float` aplicada a eles são como imagens em um layout impresso, onde o texto flui ao redor delas. Elementos com `float` permanecem parte do fluxo da página web . Isso é bem diferente de elementos da página que usam posicionamento absoluto. Elementos com posicionamento absoluto são removidos do fluxo da página, como quando a caixa de texto em um layout impresso é configurada para ignorar a quebra de linha. Elementos com posicionamento absoluto não afetam a posição de outros elementos, e outros elementos não os afetam, estejam eles em contato ou não.

Demonstração

Esta demonstração mostra um artigo com duas imagens: uma definida como `true` float: lefte outra definida como `false` float: right. Pressione o botão “alternar flutuações” para ativar e desativar as flutuações.

Flutuadores para layout

Além do exemplo simples de envolver texto em torno de imagens, os elementos flutuantes podem ser usados ​​para criar layouts web completos .

Os elementos flutuantes também são úteis para layouts em espaços menores. Veja, por exemplo, esta pequena área de uma página da web. Se usarmos um elemento flutuante floatpara a imagem do avatar, quando essa imagem mudar de tamanho, o texto na caixa se ajustará para acomodá-la:

Esse mesmo layout poderia ser obtido usando posicionamento relativo no contêiner e posicionamento absoluto no avatar. No entanto, dessa forma, o texto não seria afetado pelo avatar e não se ajustaria automaticamente a mudanças de tamanho.

Demonstração

Esta demonstração mostra um avatar com float: lefto efeito aplicado. Pressione o botão “alternar tamanho da imagem” para ver uma versão mais ampla da imagem do avatar. Observe que o texto se ajusta para acompanhar a imagem, em vez de sobrepô-la.

Limpando o flutuador

A propriedade irmã de `float` é `display: inline` clear. Um elemento que possui essa clearpropriedade definida não se moverá para cima, ficando adjacente ao `float` como o `float` deseja, mas sim para baixo, ultrapassando o `float`. Novamente, uma ilustração é mais útil do que palavras:

No exemplo acima, a barra lateral está flutuando à direita e é mais curta que a área de conteúdo principal. O rodapé, então, precisa subir para ocupar esse espaço disponível, conforme exigido pelo efeito de flutuação. Para corrigir esse problema, o rodapé pode ser limpo (clear) para garantir que permaneça abaixo das duas colunas flutuantes.

#footer {
  clear: both;
}

O atributo `clear` também possui quatro valores válidos. O valor bothmais comum é `undefined`, que limpa os valores de ponto flutuante provenientes de ambas as direções. Os valores `undefined` lefte right`undefined` podem ser usados ​​para limpar o ponto flutuante apenas de uma direção, respectivamente. O valor inicial é ` noneundefined`, que geralmente é desnecessário, a menos que seja usado para remover explicitamente um clearvalor que tenha sido definido. O valor ` undefined` inheritfaz com que o elemento herde o valor do seu elemento pai clear. Curiosamente, o Internet Explorer não suportava esse valor até a versão 8.

Limpar apenas a superfície leftou rightflutuar, embora menos comum na natureza, certamente tem suas utilidades.

O grande colapso

Uma das coisas mais desconcertantes sobre trabalhar com elementos flutuantes é como eles podem afetar o elemento que os contém (seu elemento “pai”). Se um elemento pai não contém nada além de elementos flutuantes, sua altura se reduz a zero. Isso nem sempre é óbvio se o elemento pai não tiver nenhum fundo visualmente perceptível, mas é importante estar ciente disso.

Por mais contraintuitivo que o colapso possa parecer, a alternativa é pior. Considere este cenário:

Se o elemento de bloco superior se expandisse automaticamente para acomodar o elemento flutuante, teríamos uma quebra de espaçamento artificial no fluxo de texto entre os parágrafos, sem uma maneira prática de corrigi-la. Nesse caso, nós, designers, reclamaríamos muito mais desse comportamento do que reclamamos do colapso.

O colapso de elementos quase sempre precisa ser tratado para evitar problemas de layout e compatibilidade entre navegadores. Resolvemos isso removendo o float após os elementos flutuantes no contêiner, mas antes do fechamento do contêiner.

Técnicas para limpar flutuadores

Se você estiver em uma situação em que sempre sabe qual será o elemento seguinte, pode aplicar o clear: both;valor a esse elemento e seguir com sua tarefa. Isso é ideal, pois não requer truques sofisticados nem elementos adicionais, tornando-se perfeitamente semântico. Claro que as coisas normalmente não funcionam dessa maneira e precisamos de mais ferramentas para limpar o float em nosso arsenal.

• O método da div vazia é, literalmente, uma div vazia <div style="clear: both;"></div>. Às vezes, você verá um <br />elemento `<div>` ou algum outro elemento aleatório sendo usado, mas a div é o mais comum porque não possui estilo padrão do navegador, não tem nenhuma função especial e dificilmente será estilizada genericamente com CSS. Esse método é desprezado pelos puristas da semântica, já que não tem significado contextual para a página e está ali puramente para apresentação. Claro, no sentido mais estrito, eles estão certos. Mas ele cumpre sua função e não prejudica ninguém.
• O método `overflow` depende da configuração da overflowpropriedade CSS `overflow` em um elemento pai. Se essa propriedade for definida como ` autotrue` ou hidden`false` no elemento pai, este se expandirá para conter os elementos flutuantes, efetivamente limpando-os para os elementos subsequentes. Esse método pode ser semanticamente elegante, pois pode não exigir elementos adicionais. No entanto, se você precisar adicionar um novo elemento divapenas para aplicar esse método, ele será tão pouco semântico quanto o divmétodo vazio e menos adaptável. Lembre-se também de que a propriedade `overflow` não serve especificamente para limpar elementos flutuantes. Tome cuidado para não ocultar conteúdo ou acionar barras de rolagem indesejadas.
• O método Easy Clearing (também conhecido como “clearfix”) usa um pseudo-seletor CSS inteligente ( :after) para limpar elementos flutuantes. Em vez de definir o overflow no elemento pai, você aplica uma classe adicional como “clearfix” a ele. Em seguida, aplique este CSS:

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

Isso aplicará um pequeno trecho de conteúdo, oculto da visualização, após o elemento pai, o que limpa o float. Mas essa não é  toda a história , pois é necessário usar código adicional para acomodar navegadores mais antigos. 

Diferentes cenários exigem diferentes métodos de limpeza de blocos flutuantes. Considere, por exemplo, uma grade de blocos, cada um de um tipo diferente.

Para conectar visualmente os blocos semelhantes, queremos iniciar uma nova linha quando desejarmos, neste caso, quando a cor mudar. Poderíamos usar o método de overflow ou o método de limpeza fácil, caso cada grupo de cores tivesse um elemento pai. Ou, podemos usar o método de div vazia entre cada grupo. Três divs de encapsulamento que não existiam anteriormente ou três divs de pós-processamento que também não existiam anteriormente. Deixo a seu critério qual é a melhor opção.

Problemas com números de ponto flutuante

Os floats são frequentemente criticados por sua fragilidade . A maior parte dessa fragilidade provinha de bugs no IE6 e IE7. À medida que esses navegadores caem no esquecimento, esses bugs também desaparecem. No entanto, ainda vale a pena compreendê-los caso você precise depurar um navegador antigo do IE.

• O efeito de “pushdown” ocorre quando um elemento dentro de um item flutuante é mais largo que o próprio elemento flutuante (normalmente uma imagem). A maioria dos navegadores renderiza a imagem fora do elemento flutuante, mas sem que a parte que ultrapassa o limite afete o restante do layout. Versões antigas do Internet Explorer expandiam o elemento flutuante para incluir a imagem, o que frequentemente afetava drasticamente o layout. Um exemplo comum é uma imagem que ultrapassa o conteúdo principal e empurra a barra lateral para baixo.
  
  Solução rápida: certifique-se de que não haja imagens com esse problema e use `display: none` overflow: hidden;para cortar o excesso.
• Bug da margem dupla — Outro ponto importante a lembrar ao lidar com o IE 6 é que, se você aplicar uma margem na mesma direção do elemento flutuante, ela será duplicada . Solução rápida: defina display: inlinea margem na direção do elemento flutuante e não se preocupe, ele permanecerá como um elemento de bloco.
• O “deslocamento de 3px” ocorre quando um texto adjacente a um elemento flutuante é misteriosamente deslocado em 3px, como se um estranho campo de força envolvesse o elemento flutuante. Solução rápida: defina uma largura ou altura para o texto afetado.
• No IE 7, o bug da margem inferior ocorria quando um elemento pai flutuante continha outros elementos filhos flutuantes; nesse caso, a margem inferior dos elementos filhos era ignorada pelo elemento pai. Uma solução rápida era usar preenchimento inferior no elemento pai.

Alternativas

Se você precisa que o texto se ajuste ao redor de imagens, não há muitas alternativas ao float. Aliás, dê uma olhada nesta técnica bastante inteligente para ajustar o texto a formas irregulares. Mas para layout de página, definitivamente existem opções. Eric Sol tem um artigo no A List Apart, Faux Absolute Positioning , que descreve uma técnica muito interessante que, de muitas maneiras, combina a flexibilidade do float com a força do posicionamento absoluto.

O CSS3 aborda o layout da página de algumas maneiras:

• Flexbox
• Layout de várias colunas
• Layout em grade

O posicionamento absoluto de elementos flutuantes (ou seja, você posiciona o elemento absolutamente como de costume, mas ele ainda consegue afetar outros elementos, como fazer com que o texto se ajuste ao seu redor) foi discutido, mas acho que a ideia foi arquivada devido às semelhanças com outras ideias de layout mais robustas.