Que signifie CSS flottant ? Pourquoi CSS doit-il effacer les flottants ?

En CSS, on réalise le flottement des éléments grâce à l'attribut float. (Pour plus d'informations sur l'attribut float, veuillez vous référer au manuel CSS)

La signification de ce qui précède semble aller et venir, alors expliquons-la en termes simples ci-dessous.

Vous devez savoir que certains éléments en CSS sont des éléments de niveau bloc, et ils activeront automatiquement une nouvelle ligne (article de référence sur les éléments de niveau bloc : Quelle est la définition des éléments de niveau bloc CSS ? Que sont les éléments CSS au niveau du bloc ? ), il existe un autre type d'éléments inline, qui sont des éléments inline. Ils resteront affichés sur la même ligne que le contenu précédent (article de référence sur les éléments inline : Qu'est-ce que sont les éléments CSS en ligne ? Éléments CSS au niveau du bloc La différence avec les éléments en ligne ); mais parfois nous devons changer cette méthode de mise en page, qui nécessite l'utilisation du CSS flottant.

Les flotteurs CSS permettent à un élément donné de se déplacer sur le côté de sa ligne et permettent à d'autres contenus de circuler vers le bas. Un élément flottant à droite sera poussé vers le côté droit de son conteneur et son contenu coulera vers son côté gauche. Un élément avec un flotteur sera poussé vers la gauche et son contenu coulera vers le bas.

Après avoir lu la signification du flottant CSS, voyons pourquoi CSS doit effacer le flottant ?

2. Pourquoi CSS doit-il effacer les flottants ?

Après l'explication ci-dessus de ce que signifie CSS float, nous savons que CSS float doit exister dans certains cas, alors pourquoi devrions-nous effacer le float ?

Nous devons savoir : une boîte flottante peut se déplacer de gauche à droite jusqu'à ce qu'elle rencontre une autre boîte flottante ou une boîte contenante sur son bord extérieur. La boîte flottante n'appartient pas au flux ordinaire du flux de documents. Lorsque l'élément flotte, cela n'affectera pas la disposition des éléments au niveau du bloc, mais affectera uniquement la disposition des éléments en ligne. À ce stade, le flux normal du flux de documents montrera que la boîte flottante n'a pas le même mode de mise en page. Lorsque la hauteur de la boîte contenante est inférieure à celle de la boîte flottante, un « effondrement de la hauteur » se produit. A ce moment, il est nécessaire de dégager le flotteur.

Pour faire simple :

Par exemple : si le float n'est pas effacé, le problème du chevauchement des div se produira. Vous créez une page Web avec un bloc d'en-tête en haut, deux colonnes de blocs de contenu au milieu et un bloc de pied de page en bas. Vous définissez le flottant gauche dans le bloc de contenu du milieu et les hauteurs des deux blocs sont incohérentes. Si un bloc est plus haut, le flottant doit être effacé dans le pied de page. Si le flottant n'est pas effacé, le bloc de pied de page se chevauchera. avec l'un des contenus, tel que Image :

Recommandations associées :

Que signifie CSS float ? Le principe du flottant CSS et la méthode de clearing CSS float (avec code)

Qu'est-ce que le flottement Le principe du flotteur CSS clearing