Propriedade CSS clear
A propriedade CSS clear define em quais lados os elementos flutuantes não podem flutuar. Veja exemplos e experimente.
A propriedade clear está diretamente relacionada aos floats. Ela controla se um elemento pode ficar ao lado de um elemento flutuante anterior, ou se deve ser empurrado para baixo (limpo) abaixo dele.
Quando um elemento é flutuante, o conteúdo que vem depois dele se envolve ao redor do float. O clear permite interromper esse envolvimento: um elemento limpo desce abaixo da borda inferior dos floats no lado especificado, em vez de fluir ao lado deles.
Esta página explica o que cada valor de clear faz, o motivo mais comum para usar clear (o padrão "clearfix" para conter floats) e os cuidados que devem ser observados.
Como o clear funciona
clear aceita os valores none, left, right, both, initial e inherit:
none— o padrão. O elemento pode ficar ao lado de floats em ambos os lados.left— o elemento é movido abaixo de qualquer float à esquerda que apareça antes dele.right— o elemento é movido abaixo de qualquer float à direita que apareça antes dele.both— o elemento é movido abaixo de todos os floats em qualquer lado. Este é o valor mais utilizado na maioria das situações.
Observação: clear só reage a floats que aparecem antes no código-fonte e afeta apenas elementos no fluxo de bloco normal. Não tem efeito dentro de layouts Flexbox ou Grid, onde o próprio float é ignorado.
Quando devo usar clear?
O uso mais comum de clear é conter floats. Um elemento pai que contém apenas filhos flutuantes colapsa para zero de altura, pois os floats são retirados do fluxo normal. A solução clássica — o "clearfix" — adiciona um pseudo-elemento limpo após os floats para que o pai se expanda e os envolva:
/* Clearfix: makes a container wrap its floated children */
.container::after {
content: "";
display: block;
clear: both;
}O outro uso comum é forçar um rodapé, cabeçalho ou quebra de seção a começar abaixo de uma imagem flutuante ou barra lateral, em vez de se envolver ao lado deles — que é exatamente o que os exemplos abaixo mostram.
| Valor Inicial | none |
|---|---|
| Aplica-se a | Elementos de nível de bloco. |
| Herdado | Não. |
| Animável | Não. |
| Versão | CSS1 |
| Sintaxe DOM | element.style.clear = "both"; |
Sintaxe
Sintaxe da Propriedade CSS clear
clear: none | left | right | both | initial | inherit;Exemplo da propriedade clear:
Exemplo da Propriedade CSS clear com o valor left
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: left;
background: #ccc
}
.clear {
clear: left;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
</body>
</html>Resultado
Exemplo da propriedade clear com o valor "right":
Exemplo da Propriedade CSS clear com o valor right
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #ccc
}
.clear {
clear: right;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" />
<p class="clear">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Exemplo da propriedade clear com o valor "both":
Exemplo da Propriedade CSS clear com o valor both
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
img {
float: right;
background: #CCC;
}
p.clear {
clear: both;
}
</style>
</head>
<body>
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" />
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
<p class="clear">
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Exemplo do padrão clearfix
Este é o clear exercendo sua função mais útil: sem a regra clearfix, a caixa com borda colapsaria para zero de altura porque seu único filho é flutuante. O pseudo-elemento ::after com clear: both força a caixa a envolver o float.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.box {
border: 3px solid #1c87c9;
}
.box img {
float: left;
background: #ccc;
}
/* Remove this rule and the border collapses around nothing */
.box::after {
content: "";
display: block;
clear: both;
}
</style>
</head>
<body>
<div class="box">
<img src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png" width="220" height="80" alt="Floated image" />
</div>
</body>
</html>Erros comuns
clearsó enxerga floats anteriores. Ele empurra um elemento abaixo de floats que aparecem antes dele no código-fonte, não depois. Organize sua marcação adequadamente.- Limpar o próprio elemento flutuante raramente ajuda. Para conter floats, limpe um irmão após eles (o
::afterdo clearfix), não os próprios floats. - Não tem efeito em Flexbox ou Grid. Dentro de um container flex ou grid,
floaté ignorado, portantoclearnão tem nada sobre o que agir. Prefira Flexbox ou Grid em vez de layouts baseados em float para novos códigos.
Valores
| Valor | Descrição |
|---|---|
| none | Permite elementos flutuantes em ambos os lados. É o valor padrão desta propriedade. |
| left | Significa que elementos flutuantes não são permitidos no lado esquerdo. |
| right | Significa que elementos flutuantes não são permitidos no lado direito. |
| both | Significa que elementos flutuantes não são permitidos em nenhum dos lados. |
| initial | Faz a propriedade usar seu valor padrão. |
| inherit | Herda a propriedade de seu elemento pai. |