A propriedade clear do CSS especifica se um elemento pode ter elementos flutuantes ao seu lado ou se devem ser movidos para abaixo dele (clear). Essa propriedade se aplica à elementos flutuantes ou não flutuantes. 

Quando essa propriedade é aplicada em elementos não flutuantes, ele move a borda (border edge) desse elemento para a borda da margem (margin edge) de todos os elementos flutuantes relevantes. Ocorre um colapso das margens verticais dos elementos não flutuantes.

As margens verticais entre dois elementos flutuantes não irão sofrer esse colapso. Quando aplicada a elementos flutuantes, a borda de margem (margin edge) do elemento inferior é movida abaixo da borda de margem (border edge) de todos os elementos flutuantes relevantes. Isso afeta a posição dos elementos flutuantes posteriores, sendo que os elementos flutuantes posteriores não podem ser posicionados acima dos anteriores.

Os elementos flutuantes que devem ser limpos (clear) são os elementos anteriores dentro do mesmo contexto de bloco (block formatting context).

Nota: se um elemento possuir apenas elementos flutuantes, sua altura é zerada. Se você quiser que o mesmo seja redimensionado, de modo que contenha elementos flutuantes dentro dele, você precisa limpar(clear) seus filhos automaticamente. Isso é chamado clearfix, e uma maneira de fazê-lo é adicionando um ::after pseudo-elemento com a propriedade clear.

#container::after { 
  content: "";
  display: block; 
  clear: both;
}

Sintaxe

/* Valores chaves */
clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;

/* Valores globais */
clear: inherit;
clear: initial;
clear: unset;

Valores

none
É uma palavra-chave que indica que o elemento não foi movido para baixo para limpar os elementos flutuantes anteriores.
left
É uma palavra-chave que indica que o elemento foi movido para baixo para limpar os últimos flutuantes da esquerda.
right
É uma palavra-chave que indica que o elemento foi movido para baixo para liberar os últimos elementos flutuantes.
both
É uma palavra-chave que indica que o elemento será movido para baixo para limpar os elementos flutuantes do lado esquerdo e direito.
inline-start
É uma palavra-chave que indica que o elemento será movido para baixo para limpar os elementos flutuantes no lado inicial de seu bloco, ou seja, os da esquerda flutuam nos scripts de ltr e os da direita nos scripts de rtl.
inline-end
É uma palavra-chave que indica que o elemento será movido para baixo para limpar os flutuantes no final de seu bloco, os da direita nos scripts de ltr e os flutuantes da esquerda nos scripts de rtl.

Sintaxe

none | left | right | both | inline-start | inline-end

Exemplos

clear: left

HTML

<div class="wrapper">
  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="left">This paragraph clears left.</p>
</div>

CSS

.wrapper{
  border:1px solid black;
  padding:10px;
}
.left {
  border: 1px solid black;
  clear: left;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width: 20%;
}
.red {
  float: left;
  margin: 0;
  background-color: pink;
  width:20%;
}
p {
  width: 50%;
}

clear: right

HTML

<div class="wrapper">
  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <p class="right">This paragraph clears right.</p>
</div>

CSS

.wrapper{
  border:1px solid black;
  padding:10px;
}
.right {
  border: 1px solid black;
  clear: right;
}
.black {
  float: right;
  margin: 0;
  background-color: black;
  color: #fff;
  width:20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width:20%;
}
p {
  width: 50%;
}

clear: both

HTML

<div class="wrapper">
  <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor. Fusce pulvinar lacus ac dui.</p>
  <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
  <p class="both">This paragraph clears both.</p>
</div>

CSS

.wrapper{
  border:1px solid black;
  padding:10px;
}
.both {
  border: 1px solid black;
  clear: both;
}
.black {
  float: left;
  margin: 0;
  background-color: black;
  color: #fff;
  width:20%;
}
.red {
  float: right;
  margin: 0;
  background-color: pink;
  width:20%;
}
p {
  width: 45%;
}

Especificações

Specification Status Comment
CSS Logical Properties and Values Level 1
The definition of 'float and clear' in that specification.
Rascunho editorial Adds the values inline-start and inline-end
CSS Level 2 (Revision 1)
The definition of 'clear' in that specification.
Recomendação No significant changes, though details are clarified.
CSS Level 1
The definition of 'clear' in that specification.
Recomendação Initial definition

Initial valuenone
Aplica-se ablock-level elements
Inheritednão
Midiavisual
Computed valueas specified
Animation typediscrete
Canonical orderthe unique non-ambiguous order defined by the formal grammar

Compatibilidade dos browsers

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 3.5Safari Full support 1WebView Android Full support 1Chrome Android Full support YesEdge Mobile Full support YesFirefox Android Full support 4Opera Android Full support 6Safari iOS Full support 1Samsung Internet Android Full support Yes
Flow-relative values inline-start and inline-end
Experimental
Chrome No support NoEdge No support NoFirefox Full support 55IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 55Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

 

Veja também

Etiquetas do documento e colaboradores

Colaboradores desta página: mdnwebdocs-bot, leovene
Última atualização por: mdnwebdocs-bot,