Heim > Artikel > Web-Frontend > Die umfassendste CSS-Clearfix-Methode zum Löschen von Floats

Die umfassendste CSS-Clearfix-Methode zum Löschen von Floats

PHPzOriginal: 2017-03-17 16:25:554434Durchsuche

Clearfix wird häufig in CSS zum Löschen von Floats verwendet. Der Autor listet zum Vergleich verschiedene Methoden zur Verwendung von Clearfix auf.(css Warum sollten wir Float löschen?

1 Was ist .clearfix? „.clearfix kann beim Löschen interner Floats in einer Box verwendet werden.“
Der obige Code ist die Definition und Anwendung von .clearfix. Erklären Sie kurz das Prinzip von .clearfix:

1. In IE6 und 7 löst Zoom: 1 also hasLayout aus Bewirkt, dass das Element den inneren Schwimmer schließt.

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

2. Unter Standardbrowsern fügt die Pseudoklasse .clearfix:after nach dem auf .clearfix angewendeten Element ein Element auf Blockebene ein, wodurch der Float gelöscht wird.

2. Nachteile von .clearfix

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

Wie Sie im obigen Code sehen können, funktioniert .clearfix, abgesehen von IE6 und 7, in Standardbrowsern : Beide Elemente werden unten eingefügt, wodurch wahrscheinlich unnötige Floats gelöscht werden. Zur Veranschaulichung:

Der obige Code stellt eine zweispaltige Layoutseite dar. Beachten Sie, dass das .menu-Menü einen Rahmen hat, aber da das li-Element des .menu nach links schwebt, hat das .menu keine Höhe, sodass Sie .clearfix verwenden können, um den schwebenden Inhalt innerhalb des .menu zu löschen. Der Code lautet wie folgt:

Aber nach der Anwendung von .clearfix wird die Seite unter dem Standardbrowser sehr unordentlich. Dies liegt daran, dass .clearfix:after auch den Float von .left-col löscht.

<!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. Rekonstruieren Sie .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>

Nachdem der obige Fehler aufgetreten ist, analysieren Sie, ob es außer .clearfix:after noch eine andere Methode gibt. Die Antwort lautet „Ja“. Im Artikel Blockformatierungskontexte wird im Volksmund erwähnt, dass die Elemente, die den Blockformatierungskontext bilden, das Floating interner Elemente beseitigen können. Dann machen Sie einfach .clearfix zu einem Blockformatierungskontext. Es gibt mehrere Möglichkeiten, einen Blockformatierungskontext zu erstellen:

Der Wert von float ist nicht none.

Der Wert des Überlaufs ist nicht sichtbar.
Der Wert von display ist einer von table-cell, table-caption und inline-block.
Der Wert der Position ist nicht relativ oder statisch.
Offensichtlich sind Float und Position nicht für unsere Bedürfnisse geeignet. Dann können Sie nur zwischen Überlauf und Anzeige wählen. Da das mit .clearfix und .menu angewendete Menü höchstwahrscheinlich mehrstufig ist, erfüllt overflow:hiden oder overflow:auto nicht die Anforderungen (das Dropdown-Menü wird ausgeblendet oder die Bildlaufleiste angezeigt), dann können Sie dies tun Verwenden Sie nur die Anzeige. Ergreifen Sie Maßnahmen.
Wir können den Anzeigewert von .clearfix auf einen der Werte „table-cell“, „table-caption“ und „inline-block“ festlegen, aber display: inline-block generiert zusätzlichen Leerraum und wird daher ebenfalls ausgeschlossen. Die einzigen verbleibenden Elemente sind „table-cell“ und „table-caption“. Um die Kompatibilität sicherzustellen, können Sie „display: table“ verwenden, um einen Blockformatierungskontext zu erstellen, da „display: table“ einige anonyme Felder generiert (der Anzeigewert ist Tabellenzelle) bildet einen Blockformatierungskontext. Auf diese Weise schließt unser neues .clearfix den Float des inneren Elements. Unten ist der .clearfix nach dem Refactoring.

Vier. Zusammenfassung

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

Unter IE6 und 7, solange das Element, das hasLayout auslöst, die internen Floats löschen kann. Es gibt viele Möglichkeiten, interne Floats von Elementen unter Standardbrowsern zu löschen. Mit Ausnahme von .clearfix:after sind die anderen Methoden nichts anderes als die Generierung eines neuen Blockformatierungskontexts, um den Zweck zu erreichen. Wenn Sie welche Methode unter welchen Bedingungen verwenden können, ist das meiner Meinung nach ausreichend ...

Weitere verwandte Artikel über die CSS-Clearfix-Methode zum Löschen von Floats finden Sie auf der chinesischen PHP-Website

Verwandte Artikel:

Detaillierte Analyse von Clearfix zum Löschen von Floats

Detailliertes Verständnis der Verwendung von Clearfix in CSS

Eine kurze Diskussion über die Verwendung von Clearfix und Clear in CSS

CSS über die Clearfix-Clearing-Floating-Methode

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der allgemeinen CSS-Attribute, Pseudoelemente und PseudoelementeNächster Artikel：Zusammenfassung der allgemeinen CSS-Attribute, Pseudoelemente und Pseudoelemente

In Verbindung stehende Artikel

Mehr sehen