Die float-Regel

Dies ist eine deutsche Übersetzung der float-Regeln aus der CSS2-Spezifikation. Diese Seite hat keinerlei offiziellen Charakter, sie soll lediglich helfen, das Verstehen dieser Regeln zu fördern. Im Abschnitt Referenz werden diese Regeln in die Praxis übertragen.

1. Die linke margin-Außenkante eines nach links ausgerichteten float-Elements darf nicht über die linke Außenkante des umschließenden Elements hinausstehen. Das gleiche gilt analog für die rechte Seite.
2. Für ein nach links ausgerichtetes float-Element, dem bereits andere nach links ausgerichtete float-Elemente vorausgehen, gilt:
   • Es darf nur soweit nach links laufen, dass seine linke margin- Außenkante noch rechts von der rechten margin- Außenkante der links daneben liegenden Box bleibt, oder
   • es wird so nach unten verschoben, dass seine obere margin- Außenkante unterhalb der unteren margin- Außenkante der darüber liegenden Box liegt.
3. Die rechte margin-Außenkante eines nach links ausgerichteten float-Elements darf sich nicht mit der linken margin- Außenkante eines nach rechts ausgerichteten float-Elements überlappen, das rechts von ihm steht. Das gleiche gilt analog für die rechte Seite.
4. Die obere margin-Außenkante einer float-Box darf nicht über die obere Kante des umschließenden Block- Elements hinausstehen.
5. Die obere margin-Außenkante einer float-Box darf nicht höher sein als die obere Kante eines anderen Block- Level- Elementes oder einer float-Box, die bereits vorher im Dokument generiert wurde.
6. Die obere margin-Außenkante der float-Box eines Elements darf nicht höher sein als die obere Kante einer line-Box, die durch eine weiter oben im Dokument stehende Box generiert wurde.
7. Die rechte margin-Außenkante eines nach links ausgerichteten float-Elements, auf dessen linker Seite ein anderes float-Element steht, darf nicht weiter rechts sein als die rechte Kante des umschließenden Blocks. Das gleiche gilt analog für die rechte Seite.
8. Eine float-Box muss so hoch wie möglich plaziert werden.
9. Eine nach links ausgerichtete Box muss so weit links wie möglich plaziert werden. Eine nach rechts ausgerichtete Box muss so weit rechts wie möglich plaziert werden. Eine höhere Position hat Vorrang vor einer Position, die weiter links bzw.rechts liegt.
10. Ist für eine float-Box zusätzlich ein Wert für die Eigenschaft clear notiert, gilt:
    • für {clear:left}: Die obere margin-Außenkante eines float-Elements muss unterhalb der unteren margin-Außenkante aller vorhergehenden nach links ausgerichteten float-Elemente stehen.
    • für {clear:right}: Die obere margin-Außenkante eines float-Elements muss unterhalb der unteren margin-Außenkante aller vorhergehenden nach rechts ausgerichteten float-Elemente stehen.
    • für {clear:both}: Die obere margin-Außenkante eines float-Elements muss unterhalb der unteren margin-Außenkante aller vorhergehenden float-Elemente stehen.

Warum es neun Regeln braucht

Die Zahl der Regeln überrascht auf den ersten Blick, denn die Aufgabe klingt einfach: Ein Element soll zur Seite rücken und der Text darum herumlaufen. Der Aufwand entsteht dadurch, dass ein Float aus dem normalen Fluss genommen wird, aber nicht aus der Reihenfolge des Dokuments – er muss also gleichzeitig in Beziehung zu seinem Container, zu vorherigen Floats, zu der Zeile, in der er steht, und zu den Zeilen darunter gebracht werden.

Die Regeln arbeiten dabei mit Verboten statt mit Anweisungen: Sie sagen nicht, wohin ein Float gehört, sondern wohin er nicht darf. Das ist ein bewusster Entwurf – die Schlussregel verlangt, dass ein Float so weit oben und so weit außen steht, wie es die übrigen acht zulassen. Dadurch bleibt die Anordnung eindeutig, ohne dass jeder denkbare Fall aufgezählt werden müsste.

Was aus den Regeln im Alltag folgt

Drei Beobachtungen, die viele als Fehler melden, sind unmittelbare Folgen dieser Regeln. Dass ein Float nie höher steht als die Zeile, in der er im Quelltext beginnt, erklärt, warum sich die Lage eines Bildes ändert, wenn man es einen Absatz weiter nach oben schiebt. Dass ein Float nicht über einen vorherigen derselben Seite hinaufrutschen darf, erklärt die Lücken in Reihen aus unterschiedlich hohen Elementen.

Und dass ein Float die Zeilenboxen verkürzt, aber nicht die Blockbox, erklärt, warum ein Hintergrund oder ein Rahmen am Absatz unter dem Bild hindurchläuft, obwohl der Text daneben steht. Keine dieser Beobachtungen ist eine Eigenheit eines bestimmten Browsers; alle drei stehen wörtlich in den Regeln oben. Die praktische Übertragung findet sich auf der Referenzseite zu float.