Teilen Sie einen Optimierungsplan für das Clearing von Floats

clearFix-Hack ist als Methode zum Löschen von Floating ohne Verwendung zusätzlicher Tags bekannt. Dieser Artikel bietet eine Optimierungslösung, die die erforderliche Anzahl von CSS weiter reduzieren kann.

Demo: Micro clearfix hack
Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

Micro Clearfix ist basierend auf Thierry Koblentz‘ „clearfix reloaded“ optimiert und für moderne Browser (moderne Browser) geeignet

Das Folgende ist der Codeausschnitt von Micro Clearfix

.cf:before,
.cf:after {
    content: " "; 
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

„micro clearfix“ generiert ein Pseudoklassen--Element und setzt sein Anzeige--Attribut auf Tabelle, wodurch eine anonyme Tabellenzelle erstellt und ein neuer BFC generiert wird. Dies bedeutet, dass die Pseudoklasse
:before das Falten des oberen Rands verhindert und die Pseudoklasse:after zum Löschen des Floats verwendet wird. Der Vorteil besteht darin, dass der generierte Inhalt nicht ausgeblendet werden muss. und für

ist weniger CSS-Code erforderlich. Es ist nicht erforderlich, den Float einschließlich des :before-Selektors zu löschen, aber das Hinzufügen von :before kann das Falten der oberen Ränder verhindern:

• Es ist dasselbe wie bei anderen Methoden zum Löschen von Floats mithilfe von BFC und stellt die visuelle Konsistenz sicher, z. B. die Verwendung von overflow:hidden

• Bei Verwendung von zoom:1 in IE 6/7, um visuelle Konsistenz sicherzustellen
  Hinweis: Es gibt ein Detail: In IE 6/7 wird der untere Rand von Floating-Elementen im neuen BFC nicht berücksichtigt. Eine weitere Beschreibung finden Sie hier: Besserer Float Eindämmung im IE mithilfe von CSS-Ausdrücken.
  Inhalt:“ „Vermeiden Sie die Verwendung von. Es wurde ein Fehler in Opera behoben, der Leerzeichen um das zu löschende Element erzeugt, wenn das contenteditable-Attribut auch im Element vorkommt. Eine optionale Korrektur ist möglich Verwenden Sie Schriftart: 0/0 a. Vielen Dank an Sergio Cerrutti für das Testen dieses Fehlers

[Verwandte Empfehlungen]

1 🎜>2.

CSS-Online-Handbuch

3. php.cn Dugu Jiujian (2) - CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonTeilen Sie einen Optimierungsplan für das Clearing von Floats. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!