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

Os flutuantes em CSS são uma propriedade de posicionamento que move um elemento para um dos lados do seu contêiner (left ou right), permitindo que o texto e elementos inline o envolvam. O elemento é removido do fluxo normal do documento, mas continua fazendo parte do layout. Inicialmente, eram usados para criar layouts de múltiplas colunas e envolver imagens com texto, mas agora são principalmente utilizados para resolver tarefas específicas devido a métodos mais flexíveis e previsíveis, como Flexbox e Grid.

Valores principais da propriedade float:

• none: O elemento é exibido no fluxo normal (valor padrão).
• left: O elemento é movido para a borda esquerda do contêiner.
• right: O elemento é movido para a borda direita do contêiner.
• inherit: Herda o valor do elemento pai.

Exemplo de uso:

.image {
  float: left;
  margin-right: 15px; /* Espaçamento à direita do texto que o envolve */
}

.text {
  /* O texto envolverá o elemento com a classe .image */
}

Problemas com floats:

• Colapso do fluxo (colapsamento do elemento circundante): Um elemento pai contendo apenas elementos flutuantes pode colapsar em altura, pois esses elementos não são considerados em suas dimensões normais.
• Sobreposição de elementos: Elementos adjacentes podem sobrepor o elemento flutuante se seus tamanhos não forem considerados.

Soluções para os problemas:

• Propriedade clear: Definida em um elemento que não deve envolver o elemento flutuante. Valores: left, right, both, none.
• Técnica clearfix: Adicionar uma classe especial ao elemento pai ou usar o pseudo-elemento :after para forçar o colapso do pai.

.container::after {
  content: "";
  display: table; /* Ou block */
  clear: both;
}

• Métodos modernos: Uso de Flexbox ou CSS Grid para criar layouts complexos.

Embora os floats não sejam a ferramenta principal para layout na web moderna, entender seu funcionamento é importante para manter código antigo e resolver tarefas específicas, como envolver imagens com texto.