1. O Propósito Original: Diagramação Editorial e Envoltório de Texto

A propriedade float foi concebida na especificação CSS1 inspirando-se na tipografia tradicional de jornais e revistas: permitir que uma foto, ilustração ou citação flutuasse para a margem esquerda ou direita, enquanto os parágrafos de texto fluíam suavemente ao seu redor.

.foto-artigo {
  float: left;
  margin: 0 20px 20px 0; /* Espaço para o texto não colar na foto */
}

A Diferença Crucial entre float e position: absolute

Tanto float quanto position: absolute retiram a caixa do fluxo normal vertical de blocos. No entanto:

• Com position: absolute, o texto seguinte ignora completamente o elemento e passa por baixo dele como se não houvesse nada ali.
• Com float, o navegador cria uma área de exclusão: as caixas de bloco continuam passando por trás, mas o conteúdo em linha (as linhas de texto) é empurrado e contorna o contorno do elemento flutuante.

2. A Era dos Layouts com Float e o Colapso do Pai (Collapsing Parent)

Entre 2002 e 2015, frameworks célebres como o 960 Grid System e as versões 2 e 3 do Bootstrap usavam float: left com larguras percentuais para criar grades inteiras de páginas:

/* Como se faziam colunas antes do Flexbox */
.coluna-esquerda {
  float: left;
  width: 70%;
}
 
.coluna-direita {
  float: right;
  width: 30%;
}

O Fenômeno do Colapso de Altura

No momento em que todos os filhos de um contêiner recebem float, surge o maior pesadelo dos desenvolvedores daquela era: o elemento pai encolhe para zero pixels de altura (height: 0)!

Como os elementos flutuantes saíram do fluxo normal de blocos, o elemento pai calcula que não possui nenhum filho ocupando altura vertical. O resultado?

• A cor de fundo e a borda do contêiner pai desaparecem completamente da tela.
• O elemento seguinte no HTML (como um rodapé <footer>) sobe e fica esmagado ou sobreposto por baixo das colunas flutuantes!

3. A Propriedade clear

Para dizer a um elemento que ele não deve ficar ao lado de nenhum irmão flutuante anterior, usamos a propriedade clear:

.rodape {
  clear: both; /* Desce para baixo de qualquer float à esquerda ou à direita */
}

Os valores disponíveis para clear são:

• left: O topo do elemento deve ficar abaixo de qualquer elemento com float: left que veio antes dele.
• right: O topo do elemento deve ficar abaixo de qualquer elemento com float: right.
• both: O topo do elemento deve ficar abaixo de todos os elementos flutuantes (o valor mais utilizado).
• none: Valor padrão; permite que elementos flutuantes fiquem em ambos os lados.

4. A Evolução do Clearfix: Do Hack ao Padrão Moderno

Para evitar ter que colocar clear: both manualmente em elementos seguintes, a comunidade web desenvolveu quatro gerações de técnicas para fazer o elemento pai englobar seus filhos flutuantes:

1ª Geração: A Div Vazia (Anti-padrão)

Inseria-se uma <div style="clear: both;"></div> inútil logo antes de fechar o contêiner pai. Poluía o HTML com código semântico lixo.

2ª Geração: O Hack do overflow: hidden

Descobriu-se que aplicar overflow: hidden no pai forçava a criação de um novo Block Formatting Context (BFC), obrigando o pai a conter a altura dos floats. O problema? Cortava sombras (box-shadow) e impedia menus dropdown e tooltips com posicionamento absoluto de saírem do cartão!

3ª Geração: O Micro Clearfix de Nicolas Gallagher

A técnica consagrada mundialmente que usava pseudoelementos CSS sem tocar no HTML:

/* O clássico Micro Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

4ª Geração (CSS Moderno): display: flow-root

A W3C finalmente resolveu o problema de forma definitiva introduzindo o valor display: flow-root. Ele cria um novo Contexto de Formatação de Bloco nativo de propósito específico, contendo todos os floats internos perfeitamente sem nenhum pseudoelemento e sem cortar sombras ou menus!

/* A Solução Moderna e Elegante */
.conteiner-pai {
  display: flow-root; /* Contém todos os floats filhos automaticamente! */
}

5. Quando Usar float Hoje em Dia?

Bônus Moderno: Recortes com shape-outside

Ao combinar float com a propriedade moderna shape-outside, o texto não contorna apenas uma caixa retangular rígida, mas pode seguir a curvatura circular de uma foto ou um polígono orgânico!

.avatar-redondo {
  float: left;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  shape-outside: circle(50%); /* O texto se curva perfeitamente em arco! */
  margin: 0 24px 16px 0;
}

6. Laboratório Prático: Diagramação com Float e display: flow-root

No exemplo abaixo, observe uma imagem flutuando à esquerda com o texto contornando o conteúdo, e como o contêiner com display: flow-root abraça a altura total da imagem sem colapsar:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Laboratório de Float e Clear CSS</title>
  <style>
    body {
      font-family: 'Inter', system-ui, sans-serif;
      background: #0f172a;
      color: #e2e8f0;
      padding: 30px;
      line-height: 1.7;
    }
 
    /* Contêiner com display: flow-root contendo o float sem colapsar */
    .artigo-box {
      max-width: 640px;
      background: #1e293b;
      border: 1px solid #334155;
      border-radius: 12px;
      padding: 24px;
      margin-bottom: 30px;
      display: flow-root; /* Experimente comentar esta linha para ver o colapso! */
      box-shadow: 0 10px 25px rgba(0,0,0,0.3);
    }
 
    /* Imagem flutuante com texto correndo em volta */
    .imagem-flutuante {
      float: left;
      width: 160px;
      height: 160px;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      border-radius: 12px;
      margin: 0 20px 14px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-weight: 700;
      text-align: center;
      padding: 10px;
      box-sizing: border-box;
    }
 
    .rodape-artigo {
      background: #0b0f19;
      padding: 12px 18px;
      border-radius: 8px;
      border: 1px solid #1e293b;
      font-size: 0.85rem;
      color: #94a3b8;
    }
  </style>
</head>
<body>
  <h2 style="color:#38bdf8;">Demonstração de Float Editorial Moderno</h2>
 
  <div class="artigo-box">
    <div class="imagem-flutuante">
      Foto Flutuante (float: left)
    </div>
 
    <p style="margin-top:0;">
      Este parágrafo de texto demonstra o funcionamento clássico do <code>float: left</code>. Observe atentamente como as linhas de texto contornam o retângulo colorido à esquerda, preenchendo o espaço disponível com harmonia editorial.
    </p>
 
    <p>
      Graças à declaração <code>display: flow-root</code> na caixa pai, o fundo azul-escuro e a borda englobam a altura total da imagem flutuante, impedindo que o rodapé abaixo seja engolido!
    </p>
  </div>
 
  <div class="rodape-artigo">
    📄 Eu sou um rodapé subsequente. Como o pai do artigo usou <code>display: flow-root</code>, eu permaneço respeitosamente posicionado abaixo de todo o conteúdo.
  </div>
</body>
</html>

Abra este laboratório no Playground IDE e teste remover o display: flow-root para ver visualmente o efeito desastroso do colapso de pai em ação:

⚡ Abrir no Playground IDE →

7. Resumo e Próximos Passos

• float: left e float: right removem o elemento do fluxo de blocos, mas forçam o texto em linha a contornar o contorno.
• Elementos flutuantes fazem com que contêineres pais sofram colapso de altura (height: 0).
• A propriedade clear: both instrui um elemento a descer para baixo de qualquer float anterior.
• O Micro Clearfix foi a solução mais famosa da era CSS2.1, utilizando ::after com clear: both.
• O padrão oficial moderno para conter floats e criar um novo BFC sem efeitos colaterais é display: flow-root.

O post Layouts com float, clear e Clearfix no CSS | Web Academy apareceu primeiro em Web-Zoneware.