Über die Anwendung von float und clear
Nach obenKnifflige Angelegenheit
Jeder, der schon einmal ein CSS-Layout gemacht hat, wird mit der Eigenschaft float in Berührung gekommen sein. Vorallem Anfänger tun sich damit schwer, da nicht nur das Verhalten von Boxen mit dieser Eigenschaft merkwürdig erscheint, sondern auch noch von Browsern unterschiedlich interpretiert werden - vorallem der IE hat so seine Probleme damit.
Auch etwas erfahrenere Webdesigner kommen manchmal noch ins Grübeln, warum die Boxen schon wieder nicht an der gewünschten Position sind. Mit ein bisschen Übung lässt sich die Sache gut beherrschen.
Nach obenTypisches Problem
Die Ursache von vielen Problemen im Umgang mit Elementen, die die Eigenschaft float besitzen, ist, dass sie sich innerhalb von Boxen plaziert, nichts zur Ausdehnung des Mutterelements beitragen.
Ein einfaches Beispiel wäre ein zweispaltiges Layout: Zwei Layer werden mit Hilfe von float:left; und float:right; innerhalb eines Containers auf die beiden Seiten gezwungen, um die gewünschte Unterteilung zu erreichen. Ohne weitere Maßnahmen würde sich der Inhalt der beiden Boxen sich aus dem Muttercontainer "ergießen".
Hier eine Demonstration des Problems (Im IE wird es "richtig" dargestellt, obwohl er es falsch interpretiert).
Nach oben1. Die herkömmliche Lösung
Damit sich nicht die Inhalte der beiden inneren Container ausserhalb des Muttercontainders ergießen, wird ein Absatz notiert, der dies verhindern soll. Hier sorgt clear:both; dafür, dass der Mutterbehälter sich dem Inhalt anpasst. Dadurch werden die float-Eigenschaften der beiden Spalten aufgehoben.
Der folgenede Absatz richtet vertikal sich nach der Box, die die größere Ausdehnung besitzt. Damit dieser Absatz nicht funktionslos und leer bleibt, würde sich zum Beispiel anbieten, daraus einen Abschluss für die Webseite zu gestalten (Footer).
Hier gibt es ein Beispiel dazu.
Nach oben2. Die FnE-Methode von Steve Smith
Die Lösung aus dem ersten Beispiel in nicht gerade befriedigend, da für die Gestaltung strukturelles Markup eingesetzt werden muss, was jedoch typischerweise mit CSS erledigt werden sollte.
Vor nicht allzulanger Zeit sind einige Lösungswege aufgetaucht, die ohne die Verwendung von Markup auskommen.
Den meiner Meinung nach elegantesten Weg möchte ich hier kurz vorstellen, da er mir von allen am simpelsten erscheint. Steve Smith hat ihn als erster beschrieben und ihn in seiner Begeisterung darüber FnE-Methode getauft.
Das Prinzip ist ganz leicht: Das Mutterelement bekommt einfach auch die Eigenschaft float und schon streckt er sich mit seinem Inhalt.
Hier kann man das noch mal genau unter die Lupe nehmen.
Von paul. Letzte Änderung am 25.09.2005