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.
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;
}
clearfix
(diese Bezeichnung ist nicht festgelegt, hier können Sie auch einen anderen Bezeichner verwenden).content
wirkt nur im Zusammenhang mit einem Pseudoattribut :before
oder :after
. Inhalte werden entsprechend vor bzw. hinter dem HTML-Element generiert.content: "."
(in der Kombination mit .clearfix:after
) wird ein Punkt hinter dem betreffendem HTML-Element erzeugt.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.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.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.
<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.
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.