Como funcionam os elementos flutuantes (floats) em…

Os elementos flutuantes (floats) em CSS saem do fluxo normal do documento e são deslocados na direção especificada (para a esquerda ou para a direita) dentro do seu bloco de contenção. Elementos adjacentes em linha e o conteúdo começam a envolver o elemento flutuante do lado oposto.

Propriedades principais de float:

left: O elemento desloca-se para a esquerda.
right: O elemento desloca-se para a direita.
none: O elemento permanece no fluxo normal (valor padrão).
inherit: Herda o valor do elemento pai.

Eles eram frequentemente usados para criar layouts de múltiplas colunas antes do aparecimento do Flexbox e Grid.

Características de comportamento:

O elemento flutuante torna-se de bloco, independentemente do tipo de visualização original.
A altura do contêiner pai não considera a altura do elemento flutuante, o que pode levar ao colapso do contêiner. Para resolver isso, usam-se métodos de limpeza (clearing).

Métodos de limpeza (clearing):

Propriedade clear: Aplicada a um elemento para evitar que seja envolvido por elementos flutuantes. Valores: left, right, both, none, inherit.
```
/* O elemento não envolverá elementos flutuantes de ambos os lados */
.clear-both {
  clear: both;
}
```
Reset do fluxo (técnica clearfix): Adição de um pseudo-elemento :after ao contêiner pai com clear: both e outros estilos para evitar o colapso.
```
/* clearfix clássico */
.clearfix::after {
  content: "";
  display: table; /* ou "block" */
  clear: both;
}
```

Apesar do surgimento de métodos de layout mais modernos, float ainda pode ser útil para elementos pequenos, por exemplo, para colocar uma imagem dentro do texto.

Como funcionam os elementos flutuantes (floats) em CSS?