Was ist ein Clearfix?

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?

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

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.

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

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>

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

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.

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.

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

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}