Propriedade clear
Última atualização: 2026-09-13
clear Propriedade clear
A propriedade clear controla se um elemento pode ficar ao lado de elementos flutuantes à sua esquerda, direita ou em ambos os lados. Quando definida como left, right ou both, o elemento se move para baixo dos floats relevantes. É uma ferramenta importante para evitar quebras de layout em layouts baseados em float.
| Categoria | |
|---|---|
| Valor Inicial | none |
| Herdado | Não |
| Aplica-se A | |
| Tipo de Animação | |
| Versão CSS | CSS1 |
| Status | Padrão |
📝 Sintaxe
clear: none | left | right | both | inline-start | inline-end;⚙️ Valores
| Valor | Tipo | Descrição |
|---|---|---|
none | left | right | both | Palavra-chave | Comportamento de limpeza de float. |
▶ Exemplo
Edite o código abaixo e veja o resultado ao vivo no playground:
🌐 Suporte dos Navegadores
| Navegador |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| clear | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| Suportado em todos os principais navegadores | |||||
Dica： clear:both é o valor mais comum — o elemento não permite floats de nenhum dos lados e se move abaixo de todos os floats.
Aviso： clear funciona apenas em elementos de nível de bloco, não em inline. Em layouts modernos, a forma recomendada de limpar floats é o padrão clearfix: um pseudo-elemento ::after com clear:both.
❓ Perguntas Frequentes
QQual é a diferença entre clear e clearfix?
Aclear é uma propriedade CSS aplicada ao elemento após um float, dizendo a ele para se mover abaixo do elemento flutuante para que texto ou blocos não fiquem ao seu lado. clearfix é uma técnica de limpeza, normalmente um pseudo-elemento ::after com clear:both no pai, que faz o pai envolver novamente seus filhos flutuantes e corrige o colapso de altura. Um é uma propriedade; o outro é uma solução completa.
Qclear pode ser usado no próprio elemento flutuante?
ASim, mas com nuances: quando clear é definido em um elemento flutuante, ele se move abaixo dos floats anteriores da mesma direção. Por exemplo, um elemento com float:left e clear:left cai abaixo dos elementos flutuados à esquerda anteriores, não abaixo de todos os floats. clear:both o move para baixo do ponto onde terminam os floats esquerdo e direito, o que é comumente usado para iniciar o texto em uma nova linha após uma imagem flutuante.
QO que significa clear:both?
Aclear:both declara que nenhum elemento flutuante é permitido em nenhum dos lados, então o navegador empurra o elemento para uma nova linha abaixo de todos os floats anteriores. left limpa apenas floats à esquerda, e right limpa apenas floats à direita. clear:both é o valor mais usado e, combinado com um pseudo-elemento ::after, forma a solução clássica de clearfix que evita o colapso dos contêineres pais quando seus filhos são flutuantes.
QPor que a propriedade clear não está funcionando?
AMotivos comuns: primeiro, clear afeta apenas elementos de nível de bloco, então não faz nada em elementos inline como span; segundo, o próprio elemento é flutuante, então clear só pode movê-lo abaixo de floats anteriores da mesma direção, dando um resultado diferente do esperado; terceiro, o elemento não é afetado por um float de fato, porque os floats já terminaram. Confirme que o elemento é de nível de bloco e que um float o precede.
🏷️ Propriedades Relacionadas
💡 Casos relacionados
📚 Tutoriais Relacionados
Propriedade float
Aprenda o problema que clear resolve.
Layout Flexbox
A alternativa moderna aos layouts baseados em float.
