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

Eine Technik, die häufig in CSS-Layouts mit fließenden Elementen verwendet wird, besteht darin, einem Element, von dem Sie wissen, dass es fließende Elemente enthalten wird, eine Handvoll CSS-Eigenschaften zuzuweisen. Diese Technik, die üblicherweise mit einer Klassendefinition namens 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 ist die Schaffung eines Containers :after das aktive Element, das ein einzelnes '.' enthält, das als ausgeblendet markiert ist, wodurch alle bereits vorhandenen Ausblendungen gelöscht und die Seite für den nächsten Inhalt zurückgesetzt wird.

Answer 2

Ich habe die akzeptierte Antwort ausprobiert, aber ich hatte immer noch ein Problem mit der Ausrichtung des Inhalts. 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;
    }
}

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

Answer 3

Die andere (und vielleicht einfachste) Möglichkeit, einen Clearfix zu erreichen, ist die Verwendung von overflow:hidden; auf 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.

Answer 4

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

der Unterschied ist der Inhaltspunkt, der durch ein \00A0 == whitespace

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}