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:

888