Maison > Article > interface Web > CSS sur la méthode flottante de compensation clearfix

CSS sur la méthode flottante de compensation clearfix

高洛峰original: 2017-03-17 16:26:101731parcourir

1. Qu'est-ce que .clearfix

Tant que vous recherchez "css clear float" sur Google ou Baidu, vous constaterez que de nombreux sites Web parlent de "quand la case se vide". flotteurs internes "Vous pouvez utiliser .clearfix".

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

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.

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.

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

2. Inconvénients de .clearfix

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 :

<!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>

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 :

<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>

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.

3. Reconstruisez .clearfix

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.

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

Quatre Résumé

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 le CSS sur la méthode flottante de compensation clearfix, veuillez faire attention au site Web PHP chinois !

Articles Liés

Voir plus