Como funcionam os elementos flutuantes (floats) em CSS?

O float remove um elemento do fluxo normal do documento, permitindo que outros elementos (geralmente de texto ou inline) o envolvam do lado especificado na propriedade (left, right).

Princípios básicos:

• Remoção do fluxo: Um elemento com float não ocupa espaço no fluxo normal do documento.
• Envolvimento: Os elementos de bloco adjacentes não ocuparão o espaço do elemento com float, e seu conteúdo (elementos inline) o envolverá do lado especificado.
• Influência no pai: A altura do contêiner pai, que contém apenas elementos flutuantes, pode colapsar, ignorando sua altura.
• clear: A propriedade clear (left, right, both) é usada para evitar o envolvimento por elementos que vêm depois do elemento flutuante.

Exemplo:

.image {
  float: left; /* A imagem é deslocada para a esquerda */
  margin-right: 10px; /* Adiciona margem à direita para o texto */
}

.text {
  /* O texto envolverá a imagem */
}

Recomendações:

• O uso de float está em desuso para criar layouts complexos e foi substituído por Flexbox ou Grid.
• float ainda pode ser útil para criar efeitos de envolvimento de imagens com texto.
• Para evitar que o contêiner pai colapse ao usar float, técnicas como "clearfix" ou overflow: hidden/auto são empregadas no pai.