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

Float em CSS é uma propriedade que permite que um elemento "flutue" para a esquerda ou para a direita do conteúdo que o envolve.

Características principais:

• Deslocamento: O elemento com a propriedade float aplicada desloca-se para a borda esquerda ou direita do seu contêiner pai (ou de outro elemento flutuante).
• Envolvimento: O conteúdo normal de bloco ou linha (texto, imagens) envolve o elemento flutuante.
• Contexto de fluxo: Os elementos flutuantes saem parcialmente do fluxo normal do documento, mas influenciam a posição de outros elementos.
• Aplicação: Inicialmente usado para organizar colunas ou colocar imagens com texto ao seu redor. No design moderno, Flexbox ou Grid são mais utilizados.

Valores típicos da propriedade float:

• left: O elemento flutua à esquerda.
• right: O elemento flutua à direita.
• none: O elemento não flutua (valor padrão).
• inherit: Herda o valor do elemento pai.
• initial: Define o valor padrão.

Problemas com float:

• Colapso do contêiner pai: O contêiner que contém apenas elementos flutuantes pode colapsar em altura.
• Limpeza: Para evitar que elementos seguintes envolvam os flutuantes, deve-se usar a propriedade clear.

.image-float {
  float: left; /* A imagem irá flutuar à esquerda */
  margin-right: 10px; /* Margem à direita da imagem */
}

.text-content {
  /* Este texto envolverá a imagem */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Limpeza do fluxo após elementos flutuantes */
}