info su questo sito

La proprietà clear è importante per controllare il comportamento dei float.

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

<div class="box">

Mi sento come se galleggiassi!

</div>
<section>

In questo caso, section in realtà si trova dopo il div. Tuttavia, dato che div sta flottando a sinistra, ecco cosa accade: il testo in section si disponde attorno a div e section circonda il tutto. E se volessimo far comparire section dopo l'elemento flottante?

</section>

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

<div class="box">

Mi sento come se galleggiassi!

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

Usando clear abbiamo spostato adesso questa sezione al di sotto del div flottante. Usa il valore left per sgomberare gli elementi flottanti a sinistra. Puoi anche usare right e both

</section>