Heim >Web-Frontend >CSS-Tutorial >Die umfassendste CSS-Clearfix-Methode zum Löschen von Floats
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.
.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