O que são elementos flutuantes (float) em CSS…

Os elementos flutuantes (float) em CSS são uma propriedade que permite mover um elemento fora do fluxo normal do documento e posicioná-lo à esquerda ou à direita do seu contêiner. Os elementos adjacentes e o texto irão envolver esse elemento flutuante.

Valores principais da propriedade float:

left: O elemento flutua à esquerda.
right: O elemento flutua à direita.
none: O elemento permanece no fluxo normal (valor padrão).
inherit: Herda o valor do elemento pai.

Exemplos de uso:

.float-left {
  float: left; /* O elemento irá flutuar à esquerda */
  margin-right: 10px; /* Adiciona margem à direita para o texto */
}

.float-right {
  float: right; /* O elemento irá flutuar à direita */
  margin-left: 10px; /* Adiciona margem à esquerda para o texto */
}

Características do comportamento:

O elemento flutuante é removido do fluxo padrão do documento, mas influencia a disposição dos elementos e do texto adjacentes.
O elemento pai do elemento flutuante pode 'colapsar', pois os filhos flutuantes não afetam sua altura no fluxo normal. Para evitar isso, usam-se técnicas como clear ou outras, por exemplo, overflow: hidden ou Flexbox/Grid.

A propriedade clear permite especificar de que lado os elementos flutuantes não devem estar:

.clear-left {
  clear: left; /* O elemento será colocado abaixo de qualquer elemento flutuante à esquerda */
}

.clear-right {
  clear: right; /* O elemento será colocado abaixo de qualquer elemento flutuante à direita */
}

.clear-both {
  clear: both; /* O elemento será colocado abaixo de qualquer elemento flutuante */
}

Historicamente, elementos flutuantes eram usados para criar layouts de múltiplas colunas, mas atualmente é preferível usar Flexbox ou CSS Grid devido à sua maior flexibilidade e previsibilidade. No entanto, float ainda é útil para envolver texto ao redor de imagens ou outros elementos.

O que são elementos flutuantes (float) em CSS?