Visual Lab · Instrument 4
Normaler Fluss: Block, Inline, Float, Clear – was Elemente ohne Positionierung tun
Sechs Elemente in einem Container, keines positioniert. Für jedes lässt sich display, float und clear setzen; der Container zeigt, wie sich der Fluss neu ordnet, und der Text dazwischen, wie Zeilenboxen einem Float ausweichen.
Dieser Absatz steht im Fluss zwischen den Elementen. Seine Zeilenboxen weichen einem Float aus, seine Block-Box tut es nicht – der Unterschied, den clear aufhebt.
Anonyme Boxen: was der Browser stillschweigend ergänzt
Steht Text direkt in einem Block neben einer Block-Box – wie der Absatz zwischen den Elementen im Instrument –, packt der Browser ihn in eine anonyme Block-Box, damit der Container nur Block-Kinder hat. Umgekehrt entstehen anonyme Inline-Boxen um Text, der neben Inline-Elementen steht. Diese Boxen haben keinen Selektor und lassen sich nicht gestalten, aber sie erklären, warum ein Stück Text sich manchmal wie ein Absatz verhält, obwohl kein p im Quelltext steht.
Die Regeln des Flusses
Im normalen Fluss stehen Block-Boxen untereinander, jede beginnt auf einer neuen Zeile und nimmt die volle Breite des Containers ein. Inline-Boxen stehen nebeneinander in Zeilenboxen und brechen um, wenn die Zeile voll ist. Ein Element mit display: inline-block steht in der Zeile, verhält sich innen aber wie ein Block: Breite, Höhe und vertikale Außenabstände wirken. display: none nimmt das Element vollständig aus dem Fluss, als stünde es nicht im Dokument.
Ein Float verlässt den Fluss und rückt an den linken oder rechten Rand seines Containers. Die folgenden Block-Boxen rutschen hoch, als wäre der Float nicht da – nur ihr Inhalt, die Zeilenboxen, weicht ihm aus. Das ist der Grund, warum ein gefloatetes Bild vom Text umflossen wird, der Absatz als Box aber darunter beginnt. clear auf einem Element erzwingt, dass es unter jedem vorangehenden Float auf der genannten Seite beginnt.
Die vollständigen Regeln stehen in Visuelle Formatierung und display, position und float; die neun Regeln für Floats aus der Spezifikation sind in Die float-Regel übersetzt.
Formatierungskontexte: warum manche Boxen sich anders verhalten
Der normale Fluss ist kein einziger Mechanismus, sondern besteht aus getrennten Bereichen, in denen jeweils eigene Regeln gelten. Ein Block-Formatierungskontext ist ein solcher Bereich: Innerhalb von ihm stapeln sich Blöcke untereinander, ihre senkrechten Außenabstände fallen zusammen, und umflossene Elemente werden von ihm umschlossen. Nach außen ist er abgeschlossen – weder fällt ein Außenabstand durch seine Kante, noch ragt ein Float hinein oder heraus.
Das Wurzelelement eröffnet immer einen; darüber hinaus tun es umflossene Elemente, absolut positionierte, Inline-Blöcke, Tabellenzellen und alles mit einem anderen Überlaufwert als dem Ausgangswert. Diese Aufzählung erklärt eine Menge Alltagsverhalten: warum ein Container mit abgeschnittenem Überlauf seine Floats plötzlich umschließt, warum ein Außenabstand aus einem Inline-Block nicht nach außen durchschlägt, und warum ein Block neben einem Float nicht unter ihn läuft, sobald man ihn zu einem eigenen Kontext macht. Seit es einen eigenen Wert für die Anzeigeart gibt, lässt sich ein solcher Kontext ausdrücklich anfordern, statt ihn als Nebenwirkung zu erzeugen.
Die drei Anzeigearten im Vergleich
Das Instrument bietet drei Werte an, und ihr Verhältnis lässt sich in zwei Sätzen fassen. Ein Block beginnt eine neue Zeile, nimmt die volle verfügbare Breite und nimmt Angaben zu Breite, Höhe und allen vier Abständen an. Ein Inline-Element steht im Textfluss, ist so breit wie sein Inhalt und nimmt Breite und Höhe nicht an; senkrechte Innenabstände und Rahmen werden zwar gezeichnet, verschieben aber die Zeilen darüber und darunter nicht.
Der Inline-Block verbindet beides: Er steht im Textfluss wie ein Inline-Element, verhält sich innen aber wie ein Block und nimmt alle Maßangaben an. Damit war er über Jahre das Mittel für Reihen aus Kästen. Zwei Eigenheiten gehören dazu: Der Leerraum zwischen zwei Inline-Blöcken im Quelltext wird als Leerzeichen dargestellt und erzeugt eine Lücke von einigen Pixeln, die sich nur durch Kunstgriffe im Quelltext beseitigen lässt; und die Kästen richten sich an der Grundlinie aus, weshalb ein Kasten mit Text neben einem ohne Text verrutscht. Beides sind Gründe, für Reihen heute Flexbox zu nehmen.
Die Reihenfolge im Quelltext bleibt maßgeblich
Im normalen Fluss folgt die Anordnung der Reihenfolge im Quelltext, und das ist keine Selbstverständlichkeit: Weder Flexbox noch Grid noch die Positionierung halten sich daran. Solange nichts davon im Spiel ist, gilt aber, was oben steht, steht auch oben – und das ist zugleich die Reihenfolge, in der eine Sprachausgabe vorliest und in der die Tabulatortaste springt.
Ein Float bricht diese Regel nur scheinbar: Er wird zwar zur Seite geschoben, bleibt aber an der Stelle verankert, an der er im Quelltext steht, und kann nie höher rutschen als die Zeile, in der er beginnt. Wirklich aufgehoben ist die Reihenfolge erst bei absoluter Positionierung – dort steht das Element irgendwo, und der Fluss weiß nichts mehr davon.
Fragen zum Instrument
Warum steht ein Inline-Element nicht auf einer eigenen Zeile?
Weil Inline-Boxen im Fluss nebeneinander in Zeilenboxen gesetzt werden, wie Wörter in einem Absatz. Nur Block-Boxen beginnen eine neue Zeile. display: block macht aus dem Element eine Block-Box.
Warum umfließt der Text das gefloatete Element, die Box aber nicht?
Ein Float wird aus dem Fluss genommen; nachfolgende Block-Boxen verhalten sich, als wäre es nicht da, und rutschen darunter hoch. Nur ihre Zeilenboxen – der Text – weichen dem Float aus. clear zwingt eine Block-Box unter den Float.
Was ist der Unterschied zwischen inline-block und inline?
Eine Inline-Block-Box steht wie ein Wort in der Zeile, hat aber innen das Verhalten einer Block-Box: width, height und vertikale Außenabstände wirken. Bei inline werden sie ignoriert.