float auflösen: clearfix

Im Buch ist beschrieben, wie mit einem div im HTML und einer einfachen CSS-Regel das Umfließen, welches durch float gesetzt wurde, wieder "aufgelöst" wird und sich folgende HTML-Elemente damit wieder im normalen Elementfluss verhalten. Die Lösung im Buch ist die einfachste und auch die stabilste, ein sogenanntes clearfix bietet hingegen eine elegante Lösung, welche ohne ein zusätzliches Element im HTML auskommt.

clearfix

Im Gegensatz zum clear-div kommt das clearfix ohne ein Tag im HTML aus. Dabei macht man sich der CSS-Eigenschaft content zu Nutzen. Vergleichbar zur Listenzahlen- oder punkten, die automatisch bei ol- bzw. ul-HTML-Elementen angezeigt werden, obwohl diese nicht im HTML zu finden sind, ist content eine Eigenschaft, welche Elemente in einer Darstellung auf einer Webseite erzeugt, ohne dass sie im HTML-Code stehen. Diese werden auch als "generierte Inhalte" bezeichnet.

Die benötigte CSS-Regel sieht wie folgt aus, der praktische Einsatz wird weiter unten beschrieben:

.clearfix:after {
    content: ".";
    clear: both;
    display: block;
    visibility: hidden;
    height: 0px;
}

• Die CSS-Regel selber bekommt den Klassennamen clearfix (diese Bezeichnung ist nicht festgelegt, hier können Sie auch einen anderen Bezeichner verwenden).
• Die CSS-Eigenschaft content wirkt nur im Zusammenhang mit einem Pseudoattribut :before oder :after. Inhalte werden entsprechend vor bzw. hinter dem HTML-Element generiert.
• Über content: "." (in der Kombination mit .clearfix:after) wird ein Punkt hinter dem betreffendem HTML-Element erzeugt.
• Dieser Punkt kann nun mit weiteren CSS-Eigenschaften versehen werden:
  • Das clear: both sorgt dafür, dass das Umfließen, welches durch float gesteuert wurde, wieder aufgelöst wird.
  • display: block definiert den generierten Punkt als Blockelement, damit dieser eine neue Zeile in der Darstellung einnimmt.
  • Der Punkt selber wäre jedoch auf der Webseite zu sehen. Über visibility: hidden wird der Punkt für die Darstellung im Browser versteckt. Zusätzlich wird die Höhe des generierten Punkts über height: 0px auf 0 gesetzt, sodass dieser nicht die Abstände oder Höhen im Layout beeinflusst.

So setzen Sie das clearfix ein

Hier sehen Sie zuerst die konventionelle Lösung mit einem clear-div:

<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
    sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
    duo dolores et ea rebum.
    <div class="clear"></div>
</p>

p {
    float: left;
}
.clear {
    clear: both;
}

Das p-Element ist über die erste CSS-Regel gefloatet. Im HTML-Code ist das clear-div am Ende des Blocks, aber vor dem schließenden Tag zu finden, welches mit der float-Eigenschaft versehen ist. Dieses clear-div "beendet" das veränderte Fließverhalten.

Die Klasse clearfix im öffnendem Tag

<p class="clearfix">Lorem ipsum dolor sit amet, consetetur 
    sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut 
    labore et dolore magna aliquyam erat, sed diam voluptua. At 
    vero eos et accusam et justo duo dolores et ea rebum.
</p>

In der clearfix-Lösung wird das clear-div nicht benötigt. Die Klasse clearfix wird im Gegensatz zum clear-div nicht ans Ende, sondern im öffnendem Tag des gefloateten Elements angegeben. Der durch die clearfix-CSS-Regel generierte Punkt wird nun hinter dem p-Element erzeugt und löst vergleichbar zum clear-div das Fließverhalten hinter dem p-Element auf.

Vor- und Nachteile des clearfix

Nachteil des clearfix ist, dass der Internet Explorer 6 und 7 die CSS-Eigenschaft content nicht unterstützen und dadurch die clearfix-CSS-Regel in diesen Browsern nicht greift.

Ein weiterer Nachteil ist sicher, dass die CSS-Eigenschaft content nicht sonderlich intuitiv ist, auch die notwendige Kombination mit :before bzw. :after macht das Arbeiten mit dieser Eigenschaft kompliziert.

Großer Vorteil ist sicher, dass kein zusätzliches HTML-Element im Quellcode notwendig ist. Dies sorgt für eine saubere Trennung von Inhalt und Layout.