Weitere Infos
Sie lesen:
LB1 (2009)
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:
14.9 Methode 4: EasyClearing – die Sache mit dem Punkt
Update: Es gibt neue Clearfix-Varianten
Folgende Beiträge enthalten weitere Informationen bzw. Tipps zur Verwendung von Clearfix:
- Clearfix-Methode aktualisiert (hier im Blog)
- A new micro clearfix hack (von Nicolas Gallagher, inzwischen State of the Art)
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.
Es gibt noch eine weitere Möglichkeit zum Clearen von Floats. Sie wird EasyClearing oder auch Clearfix-Methode genannt. Diese Methode wurde von Tony Aslett (http://csscreator.com/) entwickelt, von Holly 'n John (http://positioniseverything.net) erweitert und ist relativ komplex.
Das Original aus dem Jahre 2004 nimmt noch Rücksicht auf den IE5/Mac, der inzwischen eine ähnliche Verbreitung hat wie der ca. 1690 ausgestorbene Dodo. Deshalb haben Webdesigner wie Jeff Starr und andere die Clearfix-Methode aktualisiert und entrümpelt, wodurch besonders der zweite Teil mit den IE-Patches leichter verdaulich wird.
Gleich zu Anfang zeigt das folgende ToDo einmal das gesamte Easy-Clearing in Aktion. Die Erklärung folgt danach.
ToDo: Methode 4 – Floats einschließen mit EasyClearing
- Kopieren Sie die Datei galerie_clearfix.html aus dem Basisordner für diesen Abschnitt in den Übungsordner.
- Öffnen Sie galerie_clearfix.html im Editor.
- Ergänzen Sie im HTML bei beiden div-Elementen die Klasse clearfix:
<div class="galerie clearfix">
- Fügen Sie an das Ende des Style-Blocks die folgenden Styles ein:
/* Der Kern von Clearfix */
.clearfix:after {
content: ".";
display: block;
clear: both;
font-size: 0;
height: 0;
visibility: hidden;
}/* IE-Patch für IE 7*/
*:first-child+html .clearfix { min-height: 0; }
/* IE-Patch für IE 6*/
* html .clearfix { height: 1%; } - Speichern Sie die Webseite und betrachten Sie sie im Browser.
Funktionieren sollte es, auch wenn Sie beim Abtippen wahrscheinlich nicht jedes Detail sofort verstanden haben. Der Name EasyClearing entbehrt nicht einer gewissen Ironie, denn die Methode ist ziemlich komplex, und das »Easy« bezieht sich wohl eher auf die Tatsache, dass man es einsetzen kann, ohne es wirklich verstehen zu müssen:
- Sie speichern die Styles aus dem ToDo-Kästchen in Ihrem Stylesheet.
- Im HTML vergeben Sie bei Bedarf eine entsprechende Klasse wie z. B. clearfix.
Fertig. Es folgt die detaillierte Erklärung dieser Methode. Lektüre freiwillig.
Ein anderer Name: .group statt .clearfix
Dan Cederholm hat in seinem Buch "Handcrafted CSS" vorgeschlagen, die Klasse nicht .clearfix zu nennen, sondern einfach nur .group oder .container.
Der Gedanke dahinter ist, dass die Bezeichnung .group ein bisschen semantischer ist, denn sie weist auf die Funktion der Clearfix-Methode hin, eine Gruppe von HTML-Elementen innerhalb eines umgebenden Elements zu gruppieren.
