Como Criar Sites | Aprenda grátis como fazer seu site

O estilo clear diz em qual lado do elemento não é permitido elementos “flutuantes” (com o estilo float).

Valores do Estilo Clear

left

- Esse valor diz que não podemos ter elementos flutuando a esquerda desse elemento.

right

- Esse valor diz que não podemos ter elementos flutuando a direita desse elemento.

both

- Esse valor diz que não podemos ter elementos flutuando a esquerda e nem a direita desse elemento.

É dito normalmente sobre o estilo clear que ele limpa o estilo float, a partir de onde ele é chamado.

Exemplos do Estilo Clear

Os exemplos abaixo estão funcionando em Exemplo Estilo Clear.

Exemplo sem Estilo Clear

<div style="width: 200px; min-height: 100px; border: 1px solid black;">
	<div style="float: left; width: 50px; height: 100px; background-color: blue;"></div>
	alguma coisa escrita aqui alguma coisa escrita aqui
	alguma coisa escrita aqui alguma coisa escrita aqui
	alguma coisa escrita aqui alguma coisa escrita aqui
</div>

Nesse exemplo temos um elemento pai retangular, um elemento filho com o estilo float: left e algumas palavras ao lado do elemento filho. Essas palavras ficam ao lado do elemento filho <div>, pois ele está com o estilo float: left, se não ele ficaria embaixo, pois o <div> é um elemento do tipo bloco (block). Para entender um pouco sobre os o tipo de elementos acesse Propriedade Display do Elemento (CSS).

Exemplo com Estilo Clear

<div style="width: 200px; min-height: 100px; border: 1px solid black;">
	<div style="float: left; width: 50px; height: 100px; background-color: blue;"></div>
	alguma coisa escrita aqui alguma coisa escrita aqui
	<div style="clear: both;"></div>
	alguma coisa escrita aqui alguma coisa escrita aqui
	alguma coisa escrita aqui alguma coisa escrita aqui
</div>

No exemplo acima temos o mesmo cenário do exemplo passado, só que no meio das palavras temos um elemento <div> com o estilo clear: both. No momento que esse <div> é renderizado, ele diz que não deve existir em lado algum dele, algum elemento flutuante, então ele é jogado depois do último elemento flutuante do código antes dele. E as palavras que existem depois desse elemento <div> também são mostradas depois desse elemento.