CSS 2.1: `float`

Erläuterungen

float (engl. float = treiben, schweben) ist eines der drei Positionierungsschemata in CSS.

Durch die Eigenschaft float folgt das Layout eines Elementes zunächst den Regeln des normalen Elementflusses. Dann wird das float-positionierte Element aus dem Fluß herausgelöst und soweit nach links oder rechts verschoben, bis es entweder an die Kante des umschließenden Blocks oder eines anderen floatierten Elements anstößt. Vertikal wird es, wenn möglich, mit der Oberkante der Textzeile, innnerhalb der es auftritt, aligniert. Ist dort nicht ausreichend Platz, wird es Zeile für Zeile nach unten geschoben, bis eine Zeile ausreichend Platz zur Aufnahme des Elements bietet.

Ein floatiertes Element ist nicht Teil des normalen Elementflusses, hat aber dennoch einen Einfluß auf das Layout des weiteren Inhalts. Textzeilen neben einem floatierten Element werden um den Betrag der Breite des Elements gekürzt, um ein Überschreiben des Elements zu vermeiden (siehe auch: das Line- Box- Modell).

Ebenfalls ein wichtiger Punkt ist das Verhalten von Hintergründen (Grafiken). Wenn ein floatiertes Element durch seine Platzierung eine Block- Box des normalen Elementflusses teilweise abdeckt, dann werden die in der Block- Box liegenden Textzeilen (der Vordergrund) um die Breite des float-positionierten Elementes gekürzt. Eine eventuell gesetzte Hintergrundgrafik wird aber nicht seitlich verschoben. Dadurch verschwindet sie teilweise 'unter' dem floatierten Element. Der Grund dafür ist, dass die tatsächliche Breite des Elementes nicht geändert wird, um die Rechteckform des Blocks beizubehalten. Hintergründe richten sich dann an der tatsächlichen Breite des Elements aus, Vordergründe fließen um das floatierte Element herum.

Floatierte Boxes sollten unbedingt eine explizit ausgedrückte Breitenangabe aufweisen, entweder durch Notierung der Eigenschaft width oder als innere Breite wie z. B. Grafiken sie aufweisen. Der Grund dafür ist, dass floatierte Elemente auf die Mindestbreite zurückgeschrumpft werden, wenn die Breite nicht gegeben ist.

Eine weitere Nebenwirkung ergibt sich auf die Eigenschaft display. Bedingt durch float, erhält diese in jedem Fall den Wert block, es sei denn, ihr Originalwert war none. In dem Fall wird das aktuelle Element nicht dargestellt. Das bedeutet, dass mit float positionierte Elemente immer den Status eines Block- Level- Elements erhalten.

Die Eigenschaft float kann auf alle Elemente mit Ausnahme positionierter Elemente und generiertem Content angewendet werden. Wenn der Wert für position entweder absolute oder fixed ist, dann wird der Berechnete Wert für float immer auf none zurückgesetzt.
TOP

Beispiel für das Zusammenwirken von `float` und `clear`

Das Zusammenspiel zwischen float und clear ist nicht auf Anhieb verständlich, deshalb wollen wir jetzt ein kleines Beispiel im Bild betrachten.

Hier zunächst das Stylesheet:

div#eins { float:left; } div#zwei { float:right; clear:left; } div#drei { float:left; clear:left; } div#vier { float:right; clear:right; } div#fuenf { float:left; clear:right; } div#sechs { float:left; clear:left; }

Und dies ist das HTML:

Element 1:

Wegen float:left wird Element 1 als erstes Element ganz nach links geschoben.

Element 2:

Das zweite Element wird zuerst ganz nach rechts geschoben. Dann wirkt sich clear:left aus (es darf kein vorher gehendes float- Element weiter links liegen) und Element 2 wird nach unten geschoben, bis es tiefer als Element 1 liegt. Mit clear:right würde dieses Element oben rechts auf gleicher Höhe wie Element 1 stehen bleiben, denn es steht kein anderes relevantes Element auf der rechten Seite.

Beispiel für das Zusammenwirken von 'float' und 'clear'.

Element 3:

Es rutscht zur linken Seite und muss dort direkt unterhalb des Elements 1 liegen, weil seine Oberkante nicht höher als die Oberkante des vorher gehenden Element 2 liegen darf. Da die Oberkante des Elements 2 sich an der Unterkante des Elements 1 orientiert, kommt Element 3 direkt unter Element 1 zu liegen. Das clear:left spielt in diesem Fall keine Rolle mehr.

Element 4:

Element 4 wird zuerst neben Element 3 nach rechts gerückt, bis es links neben Element 2 steht. Bedingt durch clear:right rutscht es dann nach unten, bis es Element 2 nicht mehr neben sich stehen hat. Dann rutscht es ganz nach rechts. Eine Deklaration clear:left würde hier bedeuten, dass das Element weiter nach unten ritscht, bis es tiefer als Element 3 liegt (siehe blaue Strichlierung).

Element 5:

Dieses Element wird auf der Höhe des Elements 4 nach links bis geschoben, bis es direkt rechts neben Element 3 steht. Aufgrund der Deklaration clear:right muss es aber tiefer als das rechts- floatierte Element 4 liegen. Es rutscht also entsprechend weit nach unten und danach noch ganz nach links. Deshalb entsteht die Lücke unterhalb des Elementes 3.

Element 6:

Das sechste Element wird soweit wie möglich nach links geschoben, d.h. es kommt zunächst auf der rechten Seite von Element 5 zu liegen. Dann wirkt sich clear:left aus (es darf kein vorhergehendes float- Element weiter links liegen) und Element 6 wird nach unten geschoben, bis es nicht mehr neben Element 5 liegt. Da dann der Raum links von ihm frei ist, wird es weiter bis ganz nach links geschoben.

Erlaubte Werte

Auszug aus der Spezifikation (die verwendete Syntax wird im Artikel CSS-Wertesyntax genauer erläutert):

'float' left | right | none | inherit

left: Die durch das Element generierte Box wird nach links ausgerichtet, der weitere Inhalt fließt, abhängig von der Eigenschaft clear, auf der rechten Seite des Elements.
right: Die durch das Element generierte Box wird nach rechts ausgerichtet, der weitere Inhalt fließt, abhängig von der Eigenschaft clear, auf der linken Seite des Elements.
none (Ausgangswert): Die Box unterliegt dem normalen Elementfluss.
inherit: Bestimmt explizit, dass diese Eigenschaft denselben berechneten Wert wie im Elternelement annimmt.

Die `float`-Regeln

Die Regeln, nach denen Elemente mit der Eigenschaft float innerhalb des Dokuments plaziert werden, sind in der CSS2-Spezifikation explizit festgelegt. Der Artikel Die float-Regel im Abschnitt Grundlagen enthält eine korrekte deutsche Übersetzung. Auf dieser Seite sind sie in etwas zusammengefaßter und praktisch anwendbarer Form wiedergegeben.

Bei der Plazierung eines floatierten Elementes werden nicht nur die Inhalte, sondern auch padding, border und margin berücksichtigt. Anders als im normalen Elementfluß, behalten alle margins immer ihre volle, notierte Ausdehnung.
Floatierte Elemente, inklusive ihrer margins, dürfen sich nur innerhalb der Fläche bewegen, die den Inhalt des umschließenden Elements ausmacht, aber zu keiner Seite darüber hinausstehen.
Floatierte Elemente, inklusive ihrer margins, dürfen sich nicht mit anderen floatierten Elementen vertikal oder horizontal überlappen. Dies ist unabhängig davon, ob sie rechts oder links ausgerichtet sind.
Ein floatiertes Element darf mit seiner Oberkante nicht höher plaziert werden wie ein anderes floatiertes Element oder Text, das/der im Dokument vor diesem notiert ist.
Ein floatiertes Element muß soweit rechts/links und oben plaziert werden wie möglich. Dabei hat eine höhere Position Vorrang vor einer, die weiter links bzw. rechts liegt.
Links ausgerichtete floatierte Elemente müssen vollständig untereinander stehen, wenn für sie gleichzeitig {clear:left} notiert ist. Gleiches gilt analog für rechts ausgerichtete floatierte Elemente. Floatierte Elemente, für die {clear:both} notiert ist, müssen immer untereinander stehen.

Code-Beispiel:

DIV.example { width: 80%; text-align: justify; float: right; clear: left; }

Browserunterstützung

Die Eigenschaft float wird von allen modernen Browsern unterstützt, mit folgenden Einschränkungen:

IE 7: Die meisten der Probleme mit der Eigenschaft float wurden mit dieser Version gelöst. Siehe dazu auch den Artikel zum Thema Internet Explorer 7.
IE/Win 6: Probleme treten im Einzelfall bei komplizierteren Layouts auf. Dort sollte genau auf das Zusammenspiel mit geschachtelten Boxes, mit absolut positionierten Boxes und zwischen den Eigenschaften float und clear geachtet werden.
IE/Win 5.x: IE/Win 5 interpretiert diese Eigenschaft ein wenig lückenhaft. Im Einzelfall wird man aber um gründliches Testen nicht herum kommen.
IE/Mac 5.x: IE/Mac interpretiert diese Eigenschaft in den meisten Situationen richtig. Im Einzelfall wird man aber um gründliches Testen nicht herum kommen.

Eric Meyer's CSS2 Test Suite zeigt am praktischen Beispiel, wie die Browser mit dieser Eigenschaft umgehen.

Keine Eigenschaft und kein Selektor stehen in einem Stylesheet für sich allein. In der Praxis kann das Zusammenspiel zwischen verschiedenen Elementen und Selektoren einen nicht zu unterschätzenden Einfluss auf die Fähigkeiten der Browser haben. Bugs treten oft erst durch das Zusammenwirken mehrerer Eigenschaften an unterschiedlichen Elementen auf.

Wechselwirkungen:

clear, display, width

Besonderheiten im Medientyp `handheld`:

Diese Eigenschaft ist Teil des Standards CSS Mobile Profile 1.0 und unterliegt damit auch in Mobilgeräten allen relevanten Regeln aus CSS 2.1. Dennoch werden die Eigenschaften float und clear durch den Großteil aller Mobilgeräte-Browser ignoriert.

Weitere Charakteristika:

Die Stylesheet-Schnellreferenz mit einer Zusammenfassung aller visuellen Eigenschaften kann auch als PDF-Datei herunter geladen werden.

Ausgangs- wert:	Berechneter Wert:	Vererbung:	Anwendbar- keit:	%-Bezugs- wert:	Medien- gruppe(n):
`none`	Spezifizierter Wert	Nein	Siehe oben	Nicht zutreffend	Visual

Anmerkung:
Gelegentlich werden mit float formatierte Elemente als 'fließende' Elemente bezeichnet. Das ist grundsätzlich falsch, denn im Grunde genommen fließen die anderen Elemente um das float-Element herum. Geht man nach der etwas bildlichen englischen Originallyrik, dann kann man sich das float- Element innerhalb des normalen Elementflusses wie ein Boot auf einem Fluß vorstellen: es treibt zwar bis zu einem gewissen Grad mit den Fluß, das Wasser läuft aber dann am Boot vorbei und fließt hinter dem Boot normal weiter. Die Position von float- Elementen ist ähnlichen Einflüssen ausgesetzt. Sie wird durch den Fluß der Elemente bis zu einem gewissen Grad beeinflusst, letztlich geht der Elementfluß aber an den float- Elementen vorbei und setzt sich unterhalb von ihnen fort.
Auf dieser Website wird diese Positionierungsart als Floatierung oder float-Positionierung bezeichnet, da sich der Begriff float schon recht weit durchgesetzt hat und die deutsche Übersetzung (siehe oben) viel Verwirrung stiften würde.