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

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

Exemplo

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

html<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>

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

Результат:

Exemplo

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

html<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>

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

Результат:

Exemplo

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

html<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>

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

Результат:

Veja também