à propos de ce site

La propriété clear est importante pour contrôler le comportement des floats. Comparez ces deux exemples :

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

<div class="box">

J'ai l'impression de flotter!

</div>
<section>

Ici, l'élément section est placé après la div dans le code. Cependant, comme la div est flottante à gauche, voici ce qui se passe : le texte dans la section est flottant autour de la div et la section entoure même la div. Et si nous voulions que la section apparaisse après l'élément flottant ?

</section>

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

<div class="box">

J'ai l'impression de flotter!

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

Utiliser clear nous permet de bouger la section sous la div flottante. Vous utilisez la valeur clear: left; pour annuler le float: left; de la div. Vous pouvez aussi utiliser clear: right; et clear: both;.

</section>