Webseiten gestalten mit HTML und CSS (anno 2009)
Aktuelles zu »Little Boxes«
Diese Seite wird nicht mehr gepflegt. Aktuelle Infos finden Sie im Blog auf pmueller.de.
Sie sehen einen Beitrag in der Einzelansicht (mit Kommentaren).
Kapitel 14.9: Clearfix-Methode aktualisiert
Einer der meist gelesenen Abschnitte aus der Online-Version von "Little Boxes 1" ist Kapitel 14.9 zu Clearfix. Das im Buch abgedruckte 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 habe ich die Online-Version jetzt aktualisiert und vereinfacht.
Webdesigner wie Jeff Starr oder Andy Ford haben sich der Clearfix-Methode angenommen und sie soweit entrümpelt, dass insbesondere der zweite Teil mit den Patches zu den Internet Explorern etwas einfacher wird.
Insgesamt sieht die Clearfix-Methode ohne Unterstützung des IE5/Mac jetzt so aus:
/* 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%; }
Zu den IE-Patches gibt es noch einige Alternativen wie zoom: 1, die ich in "Teil 2: Patches für diverse Internet Explorer" noch etwas näher erläutert habe. Die Beispieldatei in der Online-Version wurde aktualisiert.