Weitere Infos

Sie lesen:
LB1 (2009)

Little Boxes Teil 1 (Cover)

Diese Website ist von 2009 und wird nicht mehr gepflegt. Die Informationen sind zum großen Teil also wirklich veraltet.

Aktuelle Infos finden Sie hier:

Inhaltsbereich

Teil 1: Der Kern von Clearfix

Update: Es gibt neue Clearfix-Varianten

Folgende Beiträge enthalten weitere Informationen bzw. Tipps zur Verwendung von Clearfix: 

Diese beiden Links ergänzen die Ausführungen auf dieser und den folgenden Seiten. für die Praxis sei der oben verlinkte Micro Clearfix Hack von Nicolas Gallagher empfohlen. 

Im HTML bekommt das Element, das das gefloatete Element umschließen soll, die Klasse clearfix. Im Beispiel sind das die beiden div-Elemente mit der Klasse galerie:

<div class="galerie clearfix">

Im CSS wird dazu passend eine Regel für die Klasse clearfix definiert und um das Pseudoelement :after ergänzt:

01 .clearfix:after {
02   content: ".";
03   display: block;
04   clear: both;
05   font-size: 0;
06   height: 0;
07   visibility: hidden;
08 }

Und das macht dieser Style, Zeile für Zeile:

  1. Das Pseudoelement :after fügt nach dem Element einen beliebigen Inhalt ein, der im Style mit der Eigenschaft content definiert wird.
  2. content: "." erzeugt nach dem Element mit der Klasse clearfix im Quelltext einen einfachen Punkt. Statt eines Punktes könnten Sie auch nur eine Leerstelle nehmen, aber ich finde es mit dem Punkt anschaulicher.
  3. display: block erzeugt eine Blockbox für den Punkt, weil clear für Inline-Elemente nicht gilt.
  4. clear: both cleart den mit content erzeugten Punkt und sorgt so für das Umschließen des gefloateten Elements.
  5. font-size: 0 definiert eine Schriftgröße von 0, damit der Punkt im Browserfenster nicht sichtbar ist.
  6. height: 0 schrumpft den Punkt auf eine Höhe von null Pixel.
  7. visibility: hidden macht den geschrumpften Punkt noch unsichtbarer.

Kurzform: Mit dem Pseudoelement :after wird nach dem zu clearenden Element ein ganz simpler Punkt erzeugt, der anschließend geblockt, gecleart und unsichtbar gemacht wird.

Im Grunde funktioniert diese Methode ganz ähnlich wie die allererste, nur dass Sie nicht selbst ein zusätzliches HTML-Element in den Quelltext schreiben müssen. Das macht dieser Style für Sie.