Was ist ein Clearfix?

Question

Kürzlich habe ich mir den Code einer Website angesehen und dabei festgestellt, dass jede <div> hatte eine Klasse clearfix .

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

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

Answer 1

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

Es ist erwähnenswert, dass heute die Verwendung von Floating-Elementen für das Layout mehr und mehr mit der Verwendung von besseren Alternativen entmutigt wird.

• display: inline-block - Besser
• Flexbox - Beste (aber begrenzte Browserunterstützung)

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

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

(Vielleicht ist es die absolut empfehlenswerte Art, Elemente anzuordnen, sobald ihre Position vollständig festgelegt ist).

---

Ein Clearfix ist eine Möglichkeit für ein Element, um automatisch seine untergeordneten Elemente löschen so dass Sie kein zusätzliches Markup hinzufügen müssen. Es wird im Allgemeinen verwendet in Schwimmeranordnungen wo die Elemente horizontal gestapelt werden können.

Das Clearfix ist ein Mittel zur Bekämpfung der Null-Höhen-Container-Problem für schwebende Elemente

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 Unterstützung für IE<8 benötigen, können Sie auch die folgende Version verwenden:

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

Normalerweise müssten Sie wie folgt vorgehen:

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

Für clearfix benötigen Sie nur die folgenden Angaben:

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

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

Answer 2

Die anderen Antworten sind richtig. Aber ich möchte hinzufügen, dass es ein Relikt aus der Zeit ist, als die Leute zum ersten Mal CSS lernten, und missbraucht float um ihr gesamtes Layout zu erstellen. float ist dazu gedacht, Bilder neben langen Textabschnitten zu platzieren, aber viele Leute haben es als primären Layout-Mechanismus verwendet. Da es nicht wirklich dafür gedacht war, braucht man Hacks wie "clearfix", damit es funktioniert.

Heutzutage display: inline-block ist eine solide Alternative ( außer für IE6 und IE7 ), obwohl modernere Browser mit noch nützlicheren Layout-Mechanismen unter Namen wie Flexbox, Grid-Layout usw. aufwarten.

Answer 3

En clearfix ermöglicht es einem Container, seine schwebenden Kinder zu umhüllen. Ohne einen clearfix oder einer gleichwertigen Formatierung wird ein Container nicht um seine schwebenden Unterobjekte herumgezogen und kollabiert, so als ob seine schwebenden Unterobjekte absolut positioniert wären.

Es gibt mehrere Versionen des Clearfix, mit Nicolas Gallagher y Thierry Koblentz als Hauptautoren.

Wenn Sie Unterstützung für ältere Browser wünschen, verwenden Sie am besten dieses 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 sich nicht um die Unterstützung älterer Browser kümmern, gibt es eine kürzere Version:

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

Answer 4

Einen aktuellen Überblick über die Situation im zweiten Quartal 2017 zu geben.

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

.clearfix {
   display: flow-root;
}

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

Das Element (mit einer auf flow-Root eingestellten Display-Eigenschaft) erzeugt eine Block-Container-Box und ordnet deren Inhalt mithilfe des Flow-Layouts an. Es legt immer einen neuen Blockformatierungskontext für seinen Inhalt an.

Das heißt, wenn Sie ein übergeordnetes Div verwenden, das ein oder mehrere schwebende Kinder enthält, wird diese Eigenschaft sicherstellen, dass das übergeordnete Div alle seine Kinder einschließt. Ohne dass ein Clearfix-Hack erforderlich ist. Auf alle Kinder, noch nicht einmal ein letztes Dummy-Element (wenn Sie die Clearfix-Variante mit :before auf die letzten Kinder verwenden).

.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>

Answer 5

Einfach ausgedrückt, clearfix ist ein Hacker .

Es ist eines dieser hässlichen Dinge, mit denen wir alle einfach leben müssen, da es wirklich die einzige vernünftige Methode ist, um sicherzustellen, dass fließende Kindelemente nicht über ihre Eltern hinausgehen. Es gibt noch andere Layout-Schemata, aber Floating ist heute im Webdesign und in der Entwicklung zu alltäglich, um den Wert des Clearfix-Hacks zu ignorieren.

Ich persönlich tendiere 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