Propriedade clear

A propriedade clear cancela a flutuação de um elemento em torno de outros, definida pela propriedade float. Pode aceitar os seguintes valores: none (cancela sua própria ação), both (cancela o float simultaneamente à direita e à esquerda), left (cancela o float à esquerda), right (cancela o float à direita).

Sintaxe

seletor {
	clear: none ou left ou right ou both
}

Exemplo

Vamos cancelar a flutuação do texto em torno da imagem à esquerda:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		texto texto texto texto texto texto
		texto texto texto texto texto texto
		texto texto texto texto texto texto
		texto texto texto texto texto texto
	</p>
</div>

.image {
	float: left;
	padding-right: 10px;
}
.txt {
	clear: left;
}

Exemplo

Agora vamos cancelar a flutuação do texto em torno da imagem à direita:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		texto texto texto texto texto texto
		texto texto texto texto texto texto
		texto texto texto texto texto texto
		texto texto texto texto texto texto
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: right;
}

Exemplo

Vamos cancelar a ação da própria propriedade clear:

<img class="image" src="bg.png" alt="">
<div class="txt">
	<p>
		texto texto texto texto texto texto
		texto texto texto texto texto texto
		texto texto texto texto texto texto
		texto texto texto texto texto texto
	</p>
</div>

.image {
	float: right;
	padding-right: 10px;
}
.txt {
	clear: none;
}

Veja também

a propriedade bottom,
que define a posição da borda inferior do elemento
a propriedade top,
que define a posição da borda superior do elemento
a propriedade left,
que define a posição da borda esquerda do elemento
a propriedade right,
que define a posição da borda direita do elemento
o pseudoelemento ::backdrop,
que define o posicionamento após o primeiro elemento
a propriedade caption-side,
que define a posição do título da tabela