Inhaltsbereich

Aktuelles zu »Little Boxes«

Sie sehen einen Beitrag in der Einzelansicht (mit Kommentaren).

Zeige alle Beiträge

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.

24.01.2010 von Peter Müller

Zurück