Frage Was ist ein Clearfix?


Vor kurzem habe ich den Code einer Website durchgesehen und das alles gesehen <div>  hatte eine Klasse clearfix.

Nach einer schnellen Google-Suche erfuhr ich, dass es für IE6 manchmal ist, aber was tatsächlich ist ein Clearfix?

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


867
2017-12-18 19:02


Ursprung


Antworten:


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

Es ist erwähnenswert, dass die Verwendung von Floating-Elementen für das Layout heutzutage immer mehr von der Verwendung besserer Alternativen abgeraten 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 Android Standard-Browser 4.4 unterstützt.

Für eine detaillierte Browserliste siehe: http://caniuse.com/flexbox.

(Vielleicht, wenn seine Position erst einmal vollständig festgelegt ist, kann es die absolut empfohlene Art sein, Elemente auszulegen.)


Ein Clearfix ist eine Möglichkeit für ein Element löscht automatisch seine untergeordneten Elemente, so dass Sie kein zusätzliches Markup hinzufügen müssen. Es wird allgemein in verwendet Layouts schweben wo Elemente schweben, um horizontal gestapelt zu werden.

Der Clearfix ist ein Weg, um die Null-Höhe-Container-Problem für schwimmende 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;
}

Oder, wenn Sie IE <8 Unterstützung nicht benötigen, ist folgendes auch in Ordnung:

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

Normalerweise müssten Sie etwas wie folgt 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 nach Dieser Artikel - von Chris Coyer @ CSS-Tricks


847
2017-12-18 19:04



Wenn Sie durch Visualisieren lernen, kann Ihnen dieses Bild helfen, das zu verstehen Klarfix tut.

enter image description here


413
2018-04-10 13:12



Die anderen Antworten sind korrekt. Aber ich möchte hinzufügen, dass es ein Relikt der Zeit ist, als die Leute zuerst CSS lernten und misshandelt wurden float um ihr ganzes Layout zu machen. float ist gedacht, um Dinge wie float Bilder neben langen Textläufen zu tun, aber viele Leute verwendeten es als primäre Layout-Mechanismus. 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. kommen.


58
2017-12-18 19:08



Das clearfix ermöglicht es einem Container, seine schwebenden Kinder zu umhüllen. Ohne ein clearfix oder ein äquivalentes Styling, ein Behälter wickelt sich nicht um seine schwebenden Kinder und kollabiert, als ob seine schwebenden Kinder absolut positioniert wären.

Es gibt mehrere Versionen des Clearfix mit Nicolas Gallagher und Thierry Koblentz als Schlüsselautoren.

Wenn Sie Unterstützung für ältere Browser wünschen, verwenden Sie am besten diesen clipfix:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

In SCSS sollten 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;
}

31
2018-04-18 09:35



Um einen Überblick über die Situation im zweiten Quartal 2017 zu geben.

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

.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 display-Eigenschaft, die auf "flow-root" gesetzt ist) generiert ein Block-Container-Feld und legt seinen Inhalt mithilfe des Fluss-Layouts fest. Es erstellt immer einen neuen Blockformatierungskontext für seinen Inhalt.

Das heißt, wenn Sie ein Eltern-div verwenden, das ein oder mehrere untergeordnete untergeordnete Elemente enthält, stellt diese Eigenschaft sicher, dass das übergeordnete Element alle untergeordneten Elemente einschließt. Ohne Notwendigkeit eines Clearfix-Hacks. Auf irgendwelchen Kindern noch auf einem letzten Dummy-Element (wenn Sie die Clearfix-Variante mit: vorher bei den letzten Kindern 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>


12
2018-04-20 21:02



Einfach gesagt, Clearfix ist ein Hack.

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

Ich persönlich lehne mich an die 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


10
2017-12-17 02:27



Eine Technik, die häufig in CSS-Float-basierten Layouts verwendet wird, ist das Zuweisen einer Handvoll CSS-Eigenschaften an ein Element, von dem Sie wissen, dass es Floating-Elemente enthält. Die Technik, die üblicherweise unter Verwendung einer Klassendefinition namens clearfiximplementiert (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 :after das aktive Element enthält ein einzelnes '.' Als versteckt markiert, werden alle bereits existierenden Floats gelöscht und die Seite für das nächste Stück Inhalt zurückgesetzt.


4
2017-12-18 19:09



Die andere (und vielleicht einfachste) Option für einen Clearfix ist zu verwenden overflow:hidden; auf dem enthaltenden Element. Beispielsweise

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

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


2
2018-04-19 08:39



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

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

LESS oben kompiliert zu CSS unten:

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

1
2018-01-13 00:56



Hier ist eine andere Methode die gleiche Sache, aber ein wenig anders

Der Unterschied ist der Inhaltspunkt, der durch einen ersetzt wird \00A0 == whitespace 

Mehr dazu http://www.jqui.net/tipps-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}

0
2017-09-20 09:17