sobre

A propriedade clear é importante para controlar o comportamento de elementos flutuantes. Compare estes dois exemplos:

<div class="box">...</div>
<section>...</section>
.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}

<div class="box">

Parece que estou flutuando!

</div>
<section>

Nesse caso, o elemento section está declarado depois do elemento div. No entanto, como o elemento div está definido como float:left o que acontece é: o texto dentro do elemento section envolve o elemento div e no fim o elemento section envolve tudo. Mas e se quiséssemos o elemento section depois do elemento div?

</section>

.box {
  float: left;
  width: 200px;
  height: 100px;
  margin: 1em;
}
.after-box {
  clear: left;
}

<div class="box">

Parece que estou flutuando!

</div>
<section class="after-box">

Utilizando a propriedade clear nós agora movemos essa sessao pra baixo da div flututante. Você utiliza o valor left para limpar elementos flutuando à esquerda. E você também pode limpar para a direita com right e para ambas - both as direções.

</section>