CSS: Float e Clear CSS
Última atualização: 2026-10-13
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 |
1. Propriedade Float
float faz elementos "flutuarem" para um lado de seu contêiner, com outro conteúdo envolvendo-os.
▶ Exemplo
▶ Experimente(1) Comportamento do Float
▶ Exemplo
▶ Experimente2. Problemas do Float: Colapso de Altura
Quando todos os filhos são flutuados, o pai "esquece" de envolvê-los:
▶ Exemplo
▶ ExperimenteResultado: Borda do pai abraça o topo, filhos transbordam — porque filhos flutuados não ocupam espaço no fluxo do documento.
3. Limpando Floats
(1) Usando Propriedade clear (Tradicional)
▶ Exemplo
▶ Experimente(2) Overflow do pai
▶ Exemplo
▶ ExperimenteUsa comportamento BFC (Contexto de Formatação de Bloco).
(3) Pseudo-elemento Clearfix (Recomendado)
O método padrão recomendado:
▶ Exemplo
▶ Experimente4. Alternativa Moderna: Flexbox
A maioria dos layouts float agora pode ser substituída por Flexbox ou Grid:
▶ Exemplo
▶ Experimente❓ Perguntas Frequentes
P 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.
P 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.P 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
- Float foi o principal método de layout CSS, agora amplamente substituído por Flexbox e Grid
- O problema central do float é "colapso de altura" — a correção clássica é o pseudo-elemento clearfix
- Para novos projetos, use Flexbox ou Grid; para efeitos de envolvimento de texto, float ainda é a melhor escolha
📝 Exercícios
- Crie uma página de imagem e texto com a imagem flutuando à esquerda e texto envolvendo-a.
- Use float para implementar um "layout de três colunas" — esquerda 200px, direita 200px, centro adaptativo.
- Demonstre "colapso de altura" e resolva com pelo menos três métodos (clearfix, overflow, pseudo-elemento).
- Reescreva o layout float de três colunas usando Flexbox e compare as diferenças de código.
