suchen

Heim  >  Artikel  >  Web-Frontend  >  CSS zur Clearfix-Clearing-Floating-Methode

CSS zur Clearfix-Clearing-Floating-Methode

高洛峰
高洛峰Original
2017-03-17 16:26:101725Durchsuche

1. Was ist .clearfix?

Wenn Sie bei Google oder Baidu nach „CSS Clear Float“ suchen, werden Sie feststellen, dass auf vielen Websites von „When the Box Clears“ die Rede ist interne Floats“ Sie können .clearfix verwenden. 

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

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.

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. 

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

2. Nachteile von .clearfix

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: 

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

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: 

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

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.

3. Rekonstruieren Sie .clearfix

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. 

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

4. Zusammenfassung

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 CSS-bezogene Artikel über die Clearfix-Clearing-Floating-Methode finden Sie auf der chinesischen PHP-Website!

Verwandte Artikel:

Eingehende Analyse von Clearfix zum Löschen von Floats

Eingehendes Verständnis der Verwendung von Clearfix in CSS

Eine kurze Einführung in die Verwendung von CSS Clearfix und Clear

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

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：Einfaches Beispiel für den CSS3-FiltereffektNächster Artikel：Einfaches Beispiel für den CSS3-Filtereffekt

In Verbindung stehende Artikel

Mehr sehen