Comment effacer le flotteur en CSS

Comment effacer le flottant en CSS : 1. Ajoutez une balise div vide avec le style "clear: Both" défini après le code flottant. 2. Ajoutez un pseudo-élément after avec le style "clear:both;" à l'élément parent. 3. Définissez le style "overflow: auto" sur l'élément parent.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Lorsque nous écrivons du code, il arrive parfois que certains éléments de la page ne puissent pas être affichés correctement en raison de l'utilisation d'éléments float.

Mais après avoir utilisé des éléments flottants float, il y aura des effets néfastes :

(1) Puisque l'élément flottant est hors du flux de documents, la hauteur de l'élément parent ne peut pas être étendue, ce qui affecte les éléments au même niveau que l'élément parent
(2) Les éléments non flottants au même niveau que l'élément flottant suivront, car l'élément flottant quitte le flux documentaire et n'occupe pas sa position d'origine
(3) Si l'élément flottant n'est pas le premier flottant élément, les éléments qui le précèdent doivent également être flottants, sinon cela affectera facilement l'affichage structurel de la page. À ce stade, vous devez effacer le flottant. Voici quelques méthodes CSS pour effacer le flottant.

(1) Utilisez clear:both pour effacer les flottants

Mettez une balise div vide dans le code, puis définissez clear:both sur cette balise pour effacer l'impact des flottants sur la page. Ses avantages sont la simplicité, la commodité et une bonne compatibilité, mais il n'est généralement pas recommandé d'utiliser cette méthode car elle provoquerait une confusion structurelle et n'est pas propice à une maintenance ultérieure

<div style="clear: both"></div>

(2) Utilisez le pseudo élément clearfix pour effacer le flotteur

au parent L'élément level ajoute un pseudo-élément :after En effaçant le flottement du pseudo-élément, il atteint l'objectif de prendre en charge la hauteur de l'élément parent

.clearfix:after{
    content:"";
    display:block;
    visibility:hidden;
    clear:both;
    }

(3) Utilisez l'attribut overflow de. CSS

Lors de la définition du style de débordement pour l'élément parent, quel que soit overflow:hidden ou overflow:auto, vous pouvez effacer le float tant que sa valeur n'est pas visible. Son essence est de construire un BFC, qui obtient l'effet de. soutenir la hauteur de l'élément parent

.box{
border:1px solid #ccc;
background:#eff2f4;
overflow: auto
}

(Partage vidéo d'apprentissage :

tutoriel vidéo CSS

)

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!