Apprendre les mises en page CSS
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;
}
J'ai l'impression de flotter!
</div>
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 ?
.box {
float: left;
width: 200px;
height: 100px;
margin: 1em;
}
.after-box {
clear: left;
}
J'ai l'impression de flotter!
</div>
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;.
