Was ist ein Clearfix?

1003

Kürzlich habe ich den Code einer Website durchgesehen und festgestellt, dass jeder <div> eine Klasse hat clearfix.

Nach einer kurzen Google-Suche habe ich erfahren, dass es manchmal für IE6 ist, aber was ist eigentlich ein Clearfix?

Können Sie einige Beispiele für ein Layout mit einem Clearfix im Vergleich zu einem Layout ohne Clearfix angeben?

H Bellamy
quelle
65
Es ist nicht für IE 6. Ein Clearfix stellt sicher, dass a divvollständig auf die richtige Höhe erweitert wird, um seine schwebenden untergeordneten Elemente einzuschließen. webtoolkit.info/css-clearfix.html
Sparky

Antworten:

983

Wenn Sie IE9 oder niedriger nicht unterstützen müssen, können Sie Flexbox frei verwenden und müssen keine schwebenden Layouts verwenden.

Es ist erwähnenswert, dass die Verwendung von schwebenden Elementen für das Layout heutzutage durch die Verwendung besserer Alternativen immer mehr entmutigt wird.

  • display: inline-block - Besser
  • Flexbox - Beste (aber eingeschränkte Browserunterstützung)

Flexbox wird von Firefox 18, Chrome 21, Opera 12.10 und Internet Explorer 10, Safari 6.1 (einschließlich Mobile Safari) und dem Standardbrowser 4.4 von Android unterstützt.

Eine detaillierte Browserliste finden Sie unter: https://caniuse.com/flexbox .

(Vielleicht ist es die absolut empfohlene Art, Elemente auszulegen, sobald seine Position vollständig festgelegt ist.)


Mit einem Clearfix kann ein Element seine untergeordneten Elemente automatisch löschen , sodass Sie kein zusätzliches Markup hinzufügen müssen. Es wird im Allgemeinen in Float-Layouts verwendet, in denen Elemente zum horizontalen Stapeln schweben .

Der Clearfix ist eine Möglichkeit, das Containerproblem mit der Höhe Null für schwebende Elemente zu bekämpfen

Ein Clearfix wird wie folgt durchgeführt:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Wenn Sie keine IE <8-Unterstützung benötigen, ist auch Folgendes in Ordnung:

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

Normalerweise müssten Sie Folgendes tun:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

Mit clearfix benötigen Sie nur Folgendes:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

Lesen Sie darüber in diesem Artikel - von Chris Coyer @ CSS-Tricks

Madaras Geist
quelle
1
So oder so, aus welchem ​​Grund auch immer, ein Leerraum ist eine bessere Praxis als ein Punkt. Ich hatte Probleme mit dem Punkt in einigen Browsern, weshalb ich ihn erwähnte :) Eine kleine Verbesserung wird nicht schaden :)
Val
1
content: "\00A0";Die \ 00A0 stellen einen Leerraum dar, ein einfacher Leerraum funktioniert nicht gut :) Entschuldigung. :)
Val
14
@ MadaraUchiha, warum ist display: inline-block besser als schwebende Elemente? Das einzige Problem, das ich habe, ist, dass das Anzeigen mit Inline-Block Probleme mit Leerzeichen zwischen den Tags verursacht, was nicht immer leicht zu steuern ist.
Mowwwalker
2
@Kzqai: Aus diesem Grund ist Flexbox die bevorzugte Option, wenn sie weiter unterstützt wird.
Madara Ghost
11
Nicht einverstanden, dass display: inline-blockes besser ist als Floats für blockbasiertes Layout. Inline-Blöcke werden, wie der Name schon sagt, inline gelegt - die meisten Layouts basieren auf Blöcken, und es ist einfach nicht sinnvoll, diese Blöcke in einem Inline-Formatierungskontext anzuordnen. Sie müssen sich auch mit verschiedenen Problemen im Zusammenhang mit der Inline-Formatierung befassen, z. B. Leerzeichen zwischen Elementen, andere Inline-Elemente, Größe, Ausrichtung usw., wie viele andere bereits betont haben. Zugegeben, Float-Layouts machen auch nicht viel Sinn, aber zumindest haben Floats den Vorteil, blockbasiert zu sein.
BoltClock
70

Die anderen Antworten sind richtig. Aber ich möchte hinzufügen, dass es ein Relikt der Zeit ist, als die Leute zum ersten Mal CSS lernten und missbraucht wurden, floatum ihr gesamtes Layout zu erstellen. floatist dazu gedacht, Dinge wie Float-Bilder neben langen Textläufen zu machen, aber viele Leute haben es als primären Layoutmechanismus verwendet. Da es nicht wirklich dafür gedacht war, benötigen Sie Hacks wie "clearfix", damit es funktioniert.

Heutzutage display: inline-blockist dies eine solide Alternative (mit Ausnahme von IE6 und IE7 ), obwohl modernere Browser mit noch nützlicheren Layoutmechanismen unter Namen wie Flexbox, Grid-Layout usw. ausgestattet sind.

Domenic
quelle
1
Meine Praxis hat ergeben, dass es keinen Grund gibt, jemals float zu verwenden. Wann immer Sie es benutzen, brechen die Hälfte der Dinge. Ich würde es nur benutzen, wenn ich Dinge brauche, die ich in einem Div heraufbeschwören kann. Inline-Block ist großartig. Neues Box-Modell ist super. Also keine Hacks mehr, um vertikal auszurichten.
Muhammad Umer
50
inline-blockDies ist keine strikte Verbesserung gegenüber Floats, da zwischen den Blöcken ein Problem auftritt, bei dem Leerzeichen im HTML-Code in Leerzeichen übersetzt werden, die Blöcke trennen. inline-blockerfordert eigenefloat Problemumgehungen , genau wie Clearfix.
Rory O'Kane
41

Damit clearfixkann ein Container seine schwimmenden Kinder einwickeln. Ohne ein clearfixoder ein gleichwertiges Design wickelt sich ein Container nicht um seine schwebenden Kinder und kollabiert, so als ob seine schwebenden Kinder absolut positioniert wären.

Es gibt verschiedene Versionen des Clearfix mit Nicolas Gallagher und Thierry Koblentz als Hauptautoren.

Wenn Sie ältere Browser unterstützen möchten, verwenden Sie am besten diesen Clearfix:

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

In SCSS können Sie die folgende Technik verwenden:

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

Wenn Sie ältere Browser nicht unterstützen möchten, gibt es eine kürzere Version:

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}
John Slegers
quelle
1
Schöne Antwort John! Was ich mich wundere ist, warum klar macht die divUmhüllung die schwebenden Elemente? Können Sie mir helfen, es zu visualisieren?
Alexander Suraphel
@ AlexanderSuraphel: Diese Antwort erklärt es im Detail -> stackoverflow.com/questions/12871710/…
John Slegers
16

Um ein Update zur Situation im zweiten Quartal 2017 anzubieten.

Eine neue CSS3-Anzeigeeigenschaft ist in Firefox 53, Chrome 58 und Opera 45 verfügbar .

.clearfix {
   display: flow-root;
}

Überprüfen Sie die Verfügbarkeit für jeden Browser hier: http://caniuse.com/#feat=flow-root

Das Element (mit einer Anzeigeeigenschaft, die auf flow-root festgelegt ist) generiert eine Blockcontainerbox und legt ihren Inhalt mithilfe des Flow-Layouts fest. Es wird immer ein neuer Blockformatierungskontext für seinen Inhalt erstellt.

Das heißt, wenn Sie ein übergeordnetes Div verwenden, das ein oder mehrere schwebende untergeordnete Elemente enthält, stellt diese Eigenschaft sicher, dass das übergeordnete Element alle untergeordneten Elemente einschließt. Ohne Clearfix-Hack. Bei allen untergeordneten Elementen noch bei einem letzten Dummy-Element (wenn Sie die Clearfix-Variante mit: vor bei den letzten untergeordneten Elementen verwendet haben).

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}
<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

Kir Kanos
quelle
1
Können Sie beschreiben, was dies in Bezug auf die Frage bewirkt?
1,21 Gigawatt
Clearfix-Änderungen schwebten Kinder, die den Elternfluss nicht durch clevere Hacks beeinflussen, flow-rootsind die eigentliche Lösung.
Mystrdat
11

Einfach ausgedrückt ist Clearfix ein Hack .

Es ist eines dieser hässlichen Dinge, mit denen wir alle nur leben müssen, da es wirklich der einzig vernünftige Weg ist, um sicherzustellen, dass schwebende Kinderelemente ihre Eltern nicht überfluten. Es gibt andere Layout-Schemata, aber Floating ist heutzutage im Webdesign / in der Webentwicklung zu alltäglich, um den Wert des Clearfix-Hacks zu ignorieren.

Ich persönlich neige zur Micro Clearfix-Lösung (Nicolas Gallagher)

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

Referenz

JRulle
quelle
5

Eine in CSS-Float-basierten Layouts häufig verwendete Technik besteht darin, einem Element, von dem Sie wissen, dass es Floating-Elemente enthält, eine Handvoll CSS-Eigenschaften zuzuweisen. Die Technik, die üblicherweise unter Verwendung einer Klassendefinition namens aufgerufen wird clearfix, implementiert (normalerweise) die folgenden CSS-Verhaltensweisen:

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    zoom: 1
}

Der Zweck dieser kombinierten Verhaltensweisen besteht darin, einen Container zu erstellen, :afterdessen aktives Element ein einzelnes '' enthält. markiert als versteckt, wodurch alle bereits vorhandenen Floats gelöscht und die Seite für den nächsten Inhalt effektiv zurückgesetzt werden.

Nathan Taylor
quelle
2

Die andere (und vielleicht einfachste) Option zum Erreichen eines Clearfixes ist die Verwendung overflow:hidden;für das enthaltende Element. Zum Beispiel

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}
<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

Dies kann natürlich nur in Fällen verwendet werden, in denen der Inhalt niemals überlaufen soll.

Dan W.
quelle
1

Ich habe die akzeptierte Antwort ausprobiert, aber ich hatte immer noch ein Problem mit der Inhaltsausrichtung. Durch Hinzufügen eines ": before" -Selektors wie unten gezeigt wurde das Problem behoben:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

WENIGER oben wird zu CSS unten kompiliert:

clearfix:after,
clearfix:before {
  content: " ";
  /* Older browser do not support empty content */
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}
DevWL
quelle
0

Hier ist eine andere Methode gleich, aber ein bisschen anders

Der Unterschied ist der Inhaltspunkt, der durch ein \00A0== ersetzt wirdwhitespace

Mehr dazu unter http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

Hier ist eine kompakte Version davon ...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}
Val
quelle
Sie überschreiben sich hier in mindestens 3 Fällen. .clearfix {...}, html[xmlns] .clearfix {...}, * html .clearfix {...}, Und .clearfix {...}alle dasselbe wählen und sich gegenseitig überschreiben. Dies ist ein wenig hacky und nicht wirklich benötigt.
ORyan
Dies ist die alte Version der CSS-Clearfix-Methode, die von css-tricks.com/snippets/css/clear-fix übernommen wurde. Dabei stellte ich fest, dass das "." [Punkt] zu nervig war und ersetzte es durch ein Leerzeichen , also warum \00A0, ich glaube , es wegen der Cross - Browser - Kompatibilität und dem Wissen der Zeit war.
Val