Maison > Article > interface Web > La méthode CSS clearfix la plus complète pour effacer les flotteurs

La méthode CSS clearfix la plus complète pour effacer les flotteurs

PHPzoriginal: 2017-03-17 16:25:554423parcourir

Clearfix est souvent utilisé en CSS pour effacer les flottants. L'auteur répertorie plusieurs méthodes différentes d'utilisation de clearfix à des fins de comparaison. Les amis dans le besoin peuvent se référer à la méthode CSS clearfix pour effacer les flottants.(css Pourquoi devrions-nous effacer float ? Quel est le principe de clearing float ?

1 Qu'est-ce que .clearfix Si vous recherchez « css clear float » sur Baidu, vous constaterez que de nombreux sites Web le mentionnent. ".clearfix peut être utilisé lors de la suppression des flotteurs internes dans une boîte".
Le code ci-dessus est la définition et l'application de .clearfix Expliquez brièvement le principe de .clearfix :

1 Dans IE6 et 7, zoom : 1 déclenchera hasLayout, donc. Fait en sorte que l'élément ferme le flotteur interne.

.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  height: 0;
}
.clearfix {
  zoom: 1;
}<p class="clearfix">
  <p class="floated"></p>
</p>

2. Sous les navigateurs standards, la pseudo-classe .clearfix:after insérera un élément clear: two au niveau du bloc après l'élément appliqué à .clearfix, effaçant ainsi le flottant.

2. Inconvénients de .clearfix

<p>
  <p class="floated"></p>
</p>
<p style="clear: both"></p>

Comme vous pouvez le voir dans le code ci-dessus, en laissant de côté IE6 et 7, .clearfix fonctionne dans les navigateurs standards. : les deux éléments sont insérés ci-dessous, ce qui est susceptible d'effacer les flotteurs inutiles. Pour illustrer :

Le code ci-dessus constitue une page de mise en page à deux colonnes. Notez que le menu .menu a une bordure, mais comme l'élément li du .menu flotte vers la gauche, le .menu n'a pas de hauteur, vous pouvez donc utiliser .clearfix pour effacer le contenu flottant à l'intérieur du .menu. Le code est le suivant :

Mais après avoir appliqué .clearfix, la page devient très compliquée sous le navigateur standard. En effet, .clearfix:after efface également le flottant de .left-col.

<!DOCTYPE html>
<html>
<head>
  <title>Demo</title>
  <style type="text/css">
    html, body { padding: 0; margin: 0; }
    ul { margin: 0; padding: 0; } 
  
    .clearfix:after {
      content: " ";
      display: block;
      clear: both;
      height: 0;
    }
    .clearfix {
      zoom: 1;
    }
  
    .left-col {
      background: red;      float: left;
      width: 100px;
      height: 300px;
    }
    .right-col {
      margin-left: 100px;
    }
    .menu {
      border: 1px solid #000;
    }
    .menu li {      float: left;
      display: block;
      padding: 0 1em;
      margin: 0 1em 0 0;
      background: #ccc;
    }
    .placeholder {
      background: yellow;
      height: 400px;
    }  </style>
</head>
<body>
  <p class="left-col">
  </p>
  <p class="right-col">
    <ul class="menu">
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
      <li>Menu Item</li>
    </ul>
    <p class="placeholder"></p>
  </p>
</body>
</html>

3. Reconstruisez .clearfix

<ul class="menu clearfix">
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
</ul>

Après avoir rencontré l'erreur ci-dessus, analysez s'il existe une autre méthode que .clearfix:after. La réponse est oui. Dans l'article Contextes de formatage de bloc en langue vernaculaire, il est mentionné que les éléments qui constituent le contexte de formatage de bloc peuvent effacer le flottement des éléments internes. Ensuite, faites simplement en sorte que .clearfix forme un contexte de formatage de bloc. Il existe plusieurs méthodes pour construire un contexte de formatage de bloc :

La valeur de float n'est pas nulle.

La valeur du débordement n'est pas visible.
La valeur de display est l'une des valeurs suivantes : table-cell, table-caption et inline-block.
La valeur de la position n'est ni relative ni statique.
Évidemment, le flottement et la position ne conviennent pas à nos besoins. Vous ne pouvez en choisir qu’un parmi le débordement ou l’affichage. Parce que le menu appliqué avec .clearfix et .menu est très susceptible d'être multi-niveau, overflow: caché ou overflow: auto ne répond pas aux besoins (il masquera le menu déroulant ou affichera la barre de défilement), alors vous pouvez utiliser uniquement l'affichage. Agissez.
Nous pouvons définir la valeur d'affichage de .clearfix sur l'une des valeurs table-cell, table-caption et inline-block, mais display: inline-block générera un espace blanc supplémentaire, il est donc également exclu. Les seuls qui restent sont table-cell et table-caption. Afin d'assurer la compatibilité, vous pouvez utiliser display: table pour que .clearfix forme un contexte de formatage de bloc, car display: table générera des boîtes anonymes. (la valeur d'affichage est une cellule de tableau) formera un contexte de formatage de bloc. De cette façon, notre nouveau .clearfix fermera le flotteur de l'élément interne. Vous trouverez ci-dessous le .clearfix après la refactorisation.

Quatre Résumé

.clearfix {
  zoom: 1;
  display: table;
  width: 100%;
}

Sous IE6 et 7, tant que l'élément qui déclenche hasLayout peut effacer les flottants internes. Il existe de nombreuses façons d'effacer les éléments flottants internes dans les navigateurs standard, à l'exception de .clearfix:after, les autres méthodes ne sont rien d'autre que la génération d'un nouveau contexte de formatage de bloc pour atteindre cet objectif. Si vous pouvez utiliser quelle méthode dans quelles conditions, je pense que cela suffit...

Pour plus d'articles sur la méthode CSS clearfix pour effacer les flottants, veuillez faire attention au site Web chinois php

Articles Liés

Voir plus