Comprendre le rôle de "clear:both" dans CSS

Lorsqu'une page Web comporte des éléments qui flottent à gauche ou à droite, elle peut faire circuler les éléments suivants autour d’eux. Pour éviter cela, CSS fournit la propriété "clear", qui peut être définie sur un côté spécifique (gauche, droite) ou sur "les deux".

À quoi sert "clear:both" ?

"clear:both" demande à l'élément de se placer en dessous de tous les éléments précédents qui ont flotté à gauche et à droite. Cela lui permet de démarrer sur une nouvelle ligne, en effaçant les marges ou le remplissage qui pourraient autrement envelopper les éléments flottants.

Comment fonctionne "clear:both" ?

Dans un flux de documents normal, les éléments sont empilés verticalement et le contenu circule autour d'eux. Cependant, lorsqu'un élément flotte, il se déplace vers la gauche ou la droite, permettant à d'autres contenus de circuler en dessous de lui. "clear:both" indique à l'élément actuel de commencer sous tous les éléments précédemment flottants des deux côtés.

Exemple d'utilisation

Considérez le code HTML suivant :

Dans cet exemple, le div « Flottant gauche » flotte vers la gauche, ce qui fait que le texte « Ceci est un paragraphe » s'enroule autour de lui. Le div "Effacer les deux" est ensuite utilisé pour effacer les côtés gauche et droit, permettant au texte "Ceci est un nouveau paragraphe" d'apparaître en dessous dans une nouvelle ligne.
Conclusion 
En définissant "clear:both" sur un élément, vous pouvez vous assurer qu'il commence sur une nouvelle ligne en dessous de tous les éléments précédemment flottants, garantissant ainsi une mise en page cohérente et contrôlée.