EnglishEnglish العربيةالعربية PortuguêsPortuguês Japanese日本語

Float e Clear CSS

Float era o principal método de layout CSS antes do Flexbox e Grid. Embora layouts modernos prefiram Flexbox/Grid, entender float ainda é importante — você encontrará em bases de código legadas.

Referência Rápida de Propriedades Float

Propriedade Valores Comuns Finalidade
float left, right, none Direção do float
clear left, right, both, none Limpar efeitos de float

Propriedade Float

float faz elementos "flutuarem" para um lado de seu contêiner, com outro conteúdo envolvendo-os.

Exemplo

HTML 
<style>
.float-left {
  float: left;
  width: 120px;
  background: #e3f2fd;
  border: 1px solid #90caf9;
  padding: 10px;
}
.float-right {
  float: right;
  width: 120px;
  background: #fce4ec;
  border: 1px solid #f48fb1;
  padding: 10px;
}
</style>
<div class="float-left">Float esquerda</div>
<div class="float-right">Float direita</div>
<p>Texto envolve os elementos flutuados...</p>
▶ Experimente

Comportamento do Float

Exemplo

HTML 
<style>
.container {
  border: 2px solid #333;
  padding: 10px;
}
.image {
  float: left;
  margin-right: 15px;
  margin-bottom: 10px;
  width: 150px;
  height: 100px;
  background: #e3f2fd;
}
</style>
<div class="container">
  <div class="image">Imagem</div>
  <p>Texto envolve a imagem flutuante. Este é o efeito clássico de envolvimento de texto que o float foi originalmente projetado para. O texto flui naturalmente ao redor do elemento flutuante.</p>
</div>
▶ Experimente

Problemas do Float: Colapso de Altura

Quando todos os filhos são flutuados, o pai "esquece" de envolvê-los:

Exemplo

HTML 
<style>
.parent {
  border: 2px solid red;
}
.child {
  float: left;
  width: 100px;
  height: 100px;
  background: #e3f2fd;
  border: 1px solid #1976d2;
}
</style>
<div class="parent">
  <div class="child">Filho 1</div>
  <div class="child">Filho 2</div>
</div>
▶ Experimente

Resultado: Borda do pai abraça o topo, filhos transbordam — porque filhos flutuados não ocupam espaço no fluxo do documento.

Limpando Floats

1. Usando Propriedade clear (Tradicional)

Exemplo

HTML 
<div class="parent">
  <div class="child">Conteúdo</div>
  <div class="child">Conteúdo</div>
  <div style="clear: both;"></div>
</div>
▶ Experimente

2. Overflow do pai

Exemplo

HTML 
<style>
.parent {
  overflow: hidden;
}
</style>
▶ Experimente

Usa comportamento BFC (Contexto de Formatação de Bloco).

3. Pseudo-elemento Clearfix (Recomendado)

O método padrão recomendado:

Exemplo

HTML 
<style>
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
</style>
<div class="parent clearfix">
  <div class="child" style="float: left;">Conteúdo</div>
  <div class="child" style="float: left;">Conteúdo</div>
</div>
▶ Experimente

Alternativa Moderna: Flexbox

A maioria dos layouts float agora pode ser substituída por Flexbox ou Grid:

Exemplo

HTML 
<style>
/* Método antigo: float */
.old-layout {
  overflow: hidden;
}
.old-layout .col {
  float: left;
  width: 33.33%;
}

/* Método moderno: Flexbox */
.modern-layout {
  display: flex;
}
.modern-layout .col {
  flex: 1;
}
</style>
▶ Experimente

❓ Perguntas Frequentes

Q Float ainda é usado para layouts?
R Não recomendado. Float foi projetado para envolvimento de texto, não layouts. Flexbox e Grid substituíram perfeitamente layouts float. Use float apenas para efeitos de "imagem + envolvimento de texto" — este é seu caso de uso moderno correto.
Q O que é clearfix?
R clearfix é um hack clássico para limpar efeitos de float. Adicione `::after { content: ""; display: block; clear: both; }` ao contêiner pai para fazê-lo "envolver" filhos flutuados. Com Flexbox ou Grid, clearfix é desnecessário.
Q O que fazer sobre o colapso de altura do pai float?
R O colapso de altura acontece porque elementos flutuados deixam o fluxo do documento — o pai não consegue detectar sua altura. Soluções: definir `overflow: hidden` no pai, usar clearfix, ou mudar para layout Flexbox.

📖 Resumo

📝 Exercícios

  1. Crie uma página de imagem e texto com a imagem flutuando à esquerda e texto envolvendo-a.
  2. Use float para implementar um "layout de três colunas" — esquerda 200px, direita 200px, centro adaptativo.
  3. Demonstre "colapso de altura" e resolva com pelo menos três métodos (clearfix, overflow, pseudo-elemento).
  4. Reescreva o layout float de três colunas usando Flexbox e compare as diferenças de código.
100%