Quel est le but de « clear:both » en CSS ?

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

Lorsqu'une page Web contient 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 déposer 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 s'enrouler autour des éléments flottants.

Comment fonctionne "clear:both" ?

Dans un flux de documents normal, les éléments sont empilés verticalement, le contenu circulant 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 :

<div>

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!