it-swarm.com.de

Was ist ein Clearfix?

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

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

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

956
H Bellamy

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 heutzutage die Verwendung von schwebenden Elementen für das Layout 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 Android-Standardbrowser 4.4 unterstützt.

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

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


Clearfix Image

Ein Clearfix ist eine Möglichkeit für ein Element, seine untergeordneten Elemente automatisch zu löschen , sodass Sie kein zusätzliches Markup hinzufügen müssen. Es wird in der Regel in Float-Layouts verwendet , in denen Elemente so verschoben werden, dass sie horizontal gestapelt werden.

Der Clearfix ist eine Möglichkeit, das Null-Höhe-Container-Problem 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 dieser Artikel - von Chris Coyer @ CSS-Tricks

927
Madara Uchiha

Wenn Sie durch Visualisieren lernen, hilft Ihnen dieses Bild möglicherweise zu verstehen, was clearfix tut.

enter image description here

445
kyo

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

Heutzutage ist display: inline-block eine solide Alternative ( außer IE6 und IE7 ), obwohl modernere Browser mit noch nützlicheren Layoutmechanismen unter Namen wie Flexbox, Rasterlayout usw. kommen.

63
Domenic

Das clearfix ermöglicht es einem Container, seine schwimmenden untergeordneten Elemente zu verpacken. Ohne clearfix oder ein gleichwertiges Styling wird ein Container nicht um die schwebenden Kinder gewickelt und kollabiert, als ob die schwebenden Kinder absolut positioniert wären.

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

Wenn Sie Unterstützung für ältere Browser wünschen, 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;
}
36
John Slegers

Um ein Update zur Situation im 2. 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 der Anzeigeeigenschaft flow-root) generiert ein Blockcontainerfeld und legt seinen Inhalt im Flow-Layout an. 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 einen Clearfix-Hack. Bei allen Kindern noch ein letztes Dummy-Element (wenn Sie die clearfix-Variante mit: before 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>
13
Kir Kanos

Einfach ausgedrückt ist clearfix ein Hack .

Es ist eines dieser hässlichen Dinge, mit denen wir alle leben müssen, da es die einzig vernünftige Möglichkeit ist, sicherzustellen, dass schwebende Kindelemente ihre Eltern nicht überfluten. Es gibt andere Layoutschemata, aber Floating ist heutzutage im Webdesign/in der Webentwicklung zu verbreitet, 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) */
}

reference

11
JRulle

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 mit einer Klassendefinition namens clearfix implementiert wird, 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 :after zu erstellen, der ein einzelnes 'enthält.' Als ausgeblendet markiert, werden alle vorhandenen Floats gelöscht und die Seite für den nächsten Inhalt zurückgesetzt.

5
Nathan Taylor

Die andere (und vielleicht einfachste) Möglichkeit, einen Clearfix zu erhalten, besteht darin, overflow:hidden; für das enthaltende Element zu verwenden. 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.

2
Dan W

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

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

WENIGER oben kompiliert CSS unten:

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

Hier ist eine andere Methode das Gleiche, aber ein bisschen anders

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

Mehr dazu 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}
0
Val