Quels sont les moyens d'effacer les flottants en CSS ? Introduction à quatre méthodes de compensation des flotteurs CSS

La suppression des flotteurs CSS est souvent vue dans la mise en page CSS, alors comment effacer les flotteurs en CSS ? Cet article vous présentera comment effacer les flotteurs en CSS et vous expliquera brièvement pourquoi vous devriez utiliser les flotteurs CSS.

Notre dernier articleQue signifie CSS float ? Pourquoi CSS doit-il effacer les flottants ? Il a été mentionné que le CSS flottant est utilisé car certains éléments CSS sont des éléments de niveau bloc et ils démarreront automatiquement une nouvelle ligne. Il existe également un autre type d'éléments en ligne, qui sont des éléments en ligne, et ils resteront. avec le contenu précédent Affiché sur "une ligne" mais nous devons parfois modifier cette mise en page, ce qui nécessite l'utilisation de CSS flottant. Mais lorsqu’un « effondrement en hauteur » se produit, les flotteurs doivent être dégagés. Alors, quelles sont les méthodes pour effacer les flottants en CSS ?

Jetons un coup d'œil aux quatre méthodes d'effacement des flottants en CSS.

Première méthode CSS clear float :

Utiliser un élément vide avec l'attribut clear

Utiliser un élément après l'élément flottant Éléments vides tels que

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clear {
  clear: both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

Description :

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.

Css clear float méthode deux :

Utilisez l'attribut CSS overflow

pour ajouter un débordement au conteneur du flottant element: Hidden; ou overflow:auto; peut effacer le float. De plus, hasLayout doit être déclenché dans IE6, par exemple en définissant la largeur et la hauteur du conteneur pour l'élément parent ou en définissant zoom:1.

.news {
  background-color: gray;
  border: solid 1px black;
  overflow: hidden;
  *zoom: 1;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Explication :

Après avoir ajouté l'attribut de débordement, l'élément flottant retourne à la couche du conteneur, augmentant la hauteur du conteneur, obtenant l'effet de nettoyage vers le haut du flotteur.

Avantages : il n'y a pas de problèmes structurels et sémantiques, et la quantité de code est très faible

Inconvénients : lorsque le contenu augmente, il est facile de provoquer un retour à la ligne automatique, provoquant le contenu à être masqué et les éléments qui doivent déborder ne peuvent pas être affichés ; en 2004, POPO a découvert que overflow:hidden entraînerait l'échec du bouton du milieu, ce qui est inacceptable pour moi en tant que contrôleur de navigation multi-onglets. Alors ne l'utilisez pas.

Troisième méthode CSS clear float :

Utiliser le traitement des éléments adjacents

Ne rien faire, ajoutez 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: right;
  }
.content{
  clear:both;
  }
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="content"></div>
</div>

Méthode CSS clear float quatre :

Utilisez le pseudo-élément CSS :after

combiné avec : après le pseudo-élément (notez qu'il ne s'agit pas d'une pseudo-classe, mais d'un pseudo-élément, qui représente l'élément le plus proche après un élément) et IEhack sont parfaitement compatibles avec les principaux navigateurs actuels. IEhack fait ici référence au déclenchement de hasLayout.

Ajoutez une classe clearfix au conteneur de l'élément flottant, puis ajoutez un pseudo-élément :after à cette classe pour ajouter un élément de bloc invisible (élément Block) à la fin de l'élément pour nettoyer le flotter.

.news {
  background-color: gray;
  border: solid 1px black;
  }
.news img {
  float: left;
  }
.news p {
  float: right;
  }
.clearfix:after{
  content: "020"; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;  
  }
.clearfix {
  /* 触发 hasLayout */ 
  zoom: 1; 
  }
<div class="news clearfix">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

Explication : Un espace invisible "020" ou un point "." est ajouté à la fin de l'élément interne du conteneur via un pseudo-élément CSS, et l'attribut clear est attribué pour effacer le 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.

Enfin : pour plus de détails sur certains attributs dans l'article ci-dessus, veuillez vous référer au manuel CSS.

Recommandations associées :

Résumé des méthodes courantes pour effacer les flottants dans l'échange CSS_Experience

N'oubliez pas pour effacer les flottants en CSS clear:both_Experience Exchange

Articles sur les compétences liées à Float dans CSS_Experience Exchange

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!