Abhängig vom produzierten Design hat jede der folgenden Clearfix-CSS-Lösungen ihre eigenen Vorteile.
Der Clearfix hat nützliche Anwendungen, wurde aber auch als Hack verwendet. Bevor Sie einen Clearfix verwenden, können diese modernen CSS-Lösungen möglicherweise nützlich sein:
Moderne Clearfix-Lösungen
Behälter mit overflow: auto;
Der einfachste Weg, schwebende Elemente zu löschen, ist die Verwendung des Stils overflow: autofür das enthaltende Element. Diese Lösung funktioniert in allen modernen Browsern.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Ein Nachteil bei Verwendung bestimmter Kombinationen von Rand und Auffüllung des externen Elements kann dazu führen, dass Bildlaufleisten angezeigt werden. Dies kann jedoch behoben werden, indem der Rand und der Abstand auf einem anderen übergeordneten Element platziert werden.
Die Verwendung von 'overflow: hidden' ist ebenfalls eine Clearfix-Lösung, verfügt jedoch nicht über Bildlaufleisten. Bei Verwendung von hiddenwird jedoch der Inhalt außerhalb des enthaltenen Elements zugeschnitten .
Hinweis: Das schwebende Element ist imgin diesem Beispiel ein Tag, kann jedoch ein beliebiges HTML-Element sein.
Clearfix neu geladen
Thierry Koblentz über CSSMojo schrieb: Der neueste Clearfix wurde neu geladen . Er stellte fest, dass durch das Wegfallen der Unterstützung für oldIE die Lösung auf eine CSS-Anweisung vereinfacht werden kann. Durch die Verwendung von display: block(anstelle von display: table) können Ränder außerdem ordnungsgemäß reduziert werden, wenn Elemente mit Clearfix Geschwister sind.
.container::after {
content: "";
display: block;
clear: both;
}
Dies ist die modernste Version des Clearfix.
⋮
⋮
Ältere Clearfix-Lösungen
Die folgenden Lösungen sind für moderne Browser nicht erforderlich, können jedoch für die Ausrichtung auf ältere Browser hilfreich sein.
Beachten Sie, dass diese Lösungen auf Browserfehlern beruhen und daher nur verwendet werden sollten, wenn keine der oben genannten Lösungen für Sie funktioniert.
Sie sind grob in chronologischer Reihenfolge aufgeführt.
"Beat That ClearFix", ein Clearfix für moderne Browser
Thierry Koblentz‘von CSS Mojo hat darauf hingewiesen , dass , wenn modernen Browser - Targeting können wir jetzt fallen die zoomund ::beforeEigentum / Werte und einfach zu verwenden:
.container::after {
content: "";
display: table;
clear: both;
}
Diese Lösung unterstützt IE 6/7 nicht… absichtlich!
Thierry bietet außerdem an: " Ein Wort der Vorsicht : Wenn Sie ein neues Projekt von Grund auf neu starten, versuchen Sie es, aber tauschen Sie diese Technik nicht gegen die aus, die Sie jetzt haben, denn obwohl Sie oldIE nicht unterstützen, verhindern Ihre bestehenden Regeln dies kollabierende Ränder. "
Micro Clearfix
Die neueste und weltweit verbreitete Clearfix-Lösung, der Micro Clearfix von Nicolas Gallagher .
Bekannte Unterstützung: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Überlauf-Eigenschaft
Diese grundlegende Methode wird im Normalfall bevorzugt, wenn der positionierte Inhalt nicht außerhalb der Grenzen des Containers angezeigt wird.
http://www.quirksmode.org/css/clearing.html
- Erläutert, wie häufig auftretende Probleme im Zusammenhang mit dieser Technik behoben werden, nämlich das Festlegen width: 100%des Containers.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Anstatt die displayEigenschaft zum Festlegen von "hasLayout" für den IE zu verwenden, können andere Eigenschaften zum Auslösen von "hasLayout" für ein Element verwendet werden .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Eine andere Möglichkeit, Floats mithilfe der overflowEigenschaft zu löschen, ist die Verwendung des Unterstrich-Hacks . IE wendet die mit dem Unterstrich vorangestellten Werte an, andere Browser nicht. Die zoomEigenschaft löst hasLayout im IE aus:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Während dies funktioniert ... ist es nicht ideal, Hacks zu verwenden.
PIE: Einfache Clearing-Methode
Diese ältere "Easy Clearing" -Methode bietet den Vorteil, dass positionierte Elemente auf Kosten eines schwierigeren CSS außerhalb der Grenzen des Containers hängen können.
Diese Lösung ist ziemlich alt, aber Sie können alles über Easy Clearing auf Position Is Everything erfahren: http://www.positioniseverything.net/easyclearing.html
Element mit der Eigenschaft "clear"
Die schnelle und schmutzige Lösung (mit einigen Nachteilen), wenn Sie schnell etwas zusammenschlagen:
<br style="clear: both" /> <!-- So dirty! -->
Nachteile
- Es reagiert nicht und bietet daher möglicherweise nicht den gewünschten Effekt, wenn sich die Layoutstile aufgrund von Medienabfragen ändern. Eine Lösung in reinem CSS ist idealer.
- Es fügt HTML-Markup hinzu, ohne notwendigerweise einen semantischen Wert hinzuzufügen.
- Es erfordert eine Inline-Definition und -Lösung für jede Instanz anstelle eines Klassenverweises auf eine einzelne Lösung eines „Clearfix“ im CSS und Klassenverweise darauf im HTML.
- Es macht es für andere schwierig, mit Code zu arbeiten, da sie möglicherweise mehr Hacks schreiben müssen, um ihn zu umgehen.
- Wenn Sie in Zukunft eine andere Clearfix-Lösung benötigen / verwenden möchten, müssen Sie nicht mehr jedes
<br style="clear: both" />Tag entfernen, das um das Markup herum verstreut ist.
