Explication détaillée de la façon d'effacer les flottants à l'aide de CSS

Cet article présente principalement la méthode détaillée d'utilisation de CSS pour effacer les flotteurs. Il convient de noter que la simple suppression des flotteurs peut résoudre les problèmes associés à chaque fois. La solution de fermeture des flotteurs mentionnée à la fin de l'article vaut également la peine d'être essayée. . Les amis dans le besoin peuvent se référer à la

méthode flottante claire
Méthode 1 : Utiliser un élément vide avec l'attribut clair

Utiliser un élément vide après l'élément flottant. , tel que

, et attribuez l'attribut .clear{clear:both;} en CSS pour effacer les flottants. Vous pouvez également utiliser
ou

---

.news {   
  background-color: gray;   
  border: solid 1px black;   
  }   

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }   

.clear {   
  clear: both;   
  }

<p class="news">
<img  src="news-pic.jpg" / alt="Explication détaillée de la façon d'effacer les flottants à l'aide de CSS" >
<p>some text</p>
<p class="clear"></p>
</p>

Avantages : Simple, moins de code, bonne compatibilité avec les navigateurs.
Inconvénients : un grand nombre d'éléments html non sémantiques doivent être ajoutés, le code n'est pas assez élégant et il n'est pas facile à maintenir par la suite.

Méthode 2 : utilisez l'attribut overflow de CSS

Ajoutez overflow:hidden; ou overflow:auto; au conteneur de l'élément flottant pour effacer le float In. De plus, dans IE6, HasLayout doit être déclenché, par exemple en définissant la largeur et la hauteur du conteneur pour l'élément parent ou en définissant zoom:1. Après avoir ajouté l'attribut de débordement, l'élément flottant retourne à la couche conteneur, augmentant la hauteur du conteneur, obtenant ainsi l'effet de nettoyer les éléments flottants.

.news {   
  background-color: gray;   
  border: solid 1px black;   
  overflow: hidden;   
  *zoom: 1;   
  }   

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }

<p class="news">
<img  src="news-pic.jpg" / alt="Explication détaillée de la façon d'effacer les flottants à l'aide de CSS" >
<p>some text</p>
</p>

Méthode 3 : Ajouter un flotteur au conteneur de l'élément flottant

Ajouter également un flotteur au conteneur de l'élément flottant Le flotteur interne peut être effacé en utilisant l'attribut, mais cela le fera flotter dans son ensemble et affectera la mise en page, ce n'est donc pas recommandé.

Méthode 4 : Utiliser le traitement des éléments adjacents

Ne rien faire et ajouter l'attribut clear à l'élément derrière l'élément flottant.

.news {   
  background-color: gray;   
  border: solid 1px black;   
  }   

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }   

.content{   
  clear:both;   
  }

<p class="news">
<img  src="news-pic.jpg" / alt="Explication détaillée de la façon d'effacer les flottants à l'aide de CSS" >
<p>some text</p>
<p class="content">***</p>
</p>

Notez que p.content ici a du contenu.

Méthode 5 : Utiliser CSS :after pseudo-élément

combiné avec :after pseudo-élément (notez qu'il ne s'agit pas d'une pseudo-classe, mais d'un pseudo- element, qui représente l'élément le plus proche après les éléments) et IEhack, qui sont parfaitement compatibles avec tous les principaux navigateurs grand public actuels. IEhack fait ici référence au déclenchement de hasLayout.
Ajoutez une classe clearfix au conteneur d'éléments flottants, puis ajoutez un pseudo-élément :after à cette classe pour implémenter l'ajout d'un élément de bloc invisible (élément Block) à la fin de l'élément pour nettoyer les éléments flottants.

.news {   
  background-color: gray;   
  border: solid 1px black;   
  }   

.news img {   
  float: left;   
  }   

.news p {   
  float: rightright;   
  }   

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

.clearfix {   
  /* 触发 hasLayout */
  zoom: 1;    
  }

<p class="news clearfix">
<img  src="news-pic.jpg" / alt="Explication détaillée de la façon d'effacer les flottants à l'aide de CSS" >
<p>some text</p>
</p>

Ajoutez un espace invisible "020" ou un point "." à la fin de l'élément interne du conteneur via des pseudo-éléments CSS, et attribuez le clear attribut pour l'effacer float. Il convient de noter que pour les navigateurs IE6 et IE7, un zoom:1 doit être ajouté à la classe clearfix pour déclencher haslayout.

Résumé
Grâce à l'exemple ci-dessus, nous pouvons facilement constater que les méthodes de nettoyage des flotteurs peuvent être divisées en deux catégories :

L'une consiste à utiliser le clear , y compris dans les éléments flottants Ajoutez un p vide avec l'attribut clear: Both à la fin pour fermer l'élément. En fait, la méthode d'utilisation du pseudo-élément :after est également réalisée en ajoutant un élément avec le contenu d'un point. et l'attribut clear: two à la fin de l'élément.

La seconde consiste à déclencher le BFC (Block Formatting Contexts, contexte de formatage au niveau du bloc) de l'élément parent de l'élément flottant, afin que l'élément parent puisse contenir des éléments flottants.

Utilisez la méthode du pseudo-élément :after dans la mise en page principale de la page Web et utilisez-la comme moyen principal de nettoyer les flottants ; utilisez overflow:hidden dans les petits modules tels que ul (faites attention aux éventuels problèmes d'éléments de débordement cachés) ; s'il s'agit d'éléments flottants, ils peuvent automatiquement effacer les flotteurs internes sans traitement spécial ; utiliser les éléments adjacents dans le corps pour effacer les flotteurs précédents.

Enfin, vous pouvez utiliser la méthode relativement parfaite du pseudo-élément :after pour nettoyer les flottants, rendant ainsi la structure du document plus claire.

Post-scriptum : Effacer le flotteur ou fermer le flotteur ?
Nous utilisons souvent des flotteurs dans la mise en page des pages Web. Grâce à eux, nous pouvons obtenir plus facilement les effets souhaités, mais les flotteurs laissent souvent des dangers cachés. À ce stade, nous faisons généralement une chose pour nettoyer les flotteurs, mais nettoyer les flotteurs laisse souvent des dangers cachés. Le code suivant :

<!DOCTYPE html>   
<html>   
<head>   
    <meta charset="UTF-8">   
    <title>Document</title>   
    <style type=&#39;text/css&#39;>   
        #main{   
            border: 1px solid #000;   
        }   
        #left{   
            float: left;   
            width: 100px;   
            height: 100px;   
            background-color: #f00;   
        }   
        #right{   
            float: left;   
            width: 100px;   
            height: 100px;   
            background-color: #0f0;   
        }   
    </style>   
</head>   
<body>   
    <p id="main">   
        <p id="left"></p>   
        <p id="right"></p>   
    </p>   
</body>   
</html>

Le rendu est le suivant : <🎜. >

Bien que clair : les deux sont utilisés en pied pour dégager les flotteurs, la hauteur du principal ne peut pas s'adapter à la hauteur des sous-éléments, ce qui entraîne un effondrement (indiqué par la flèche).

Ce qui suit présente le flotteur fermé. Comme son nom l'indique, il s'agit de fermer l'élément flottant et d'effacer l'impact du flottement. La méthode la plus couramment utilisée pour effacer les flotteurs est clearfix. Plus précisément, au lieu d'ajouter clear:both dans foot, insérez la ligne de CSS suivante :

#main:after{   
            content: '.';   
            height: 0;   
            visibility: hidden;   
            /*display: block;*/
            clear:both;   
        }

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!