"Fluss" ist eines der wichtigsten grundlegenden Konzepte im Layout. Es ist das Prinzip der Organisation von Elementen auf einer Seite ohne Stile: Wenn wir HTML schreiben, aber kein CSS verwenden, wird die Darstellung im Browser vorhersehbar sein, weil wir genau wissen, wie der Browser die Elemente im Fluss anordnet.

Auch wenn keine Stylesheets mit einer Seite verbunden sind, werden dennoch CSS-Regeln auf jedes Element angewendet, die in die Browser-Engine integriert sind. Dank dieser Regeln ist beispielsweise eine Überschrift <h1> größer als eine Überschrift <h2>, und Links sind standardmäßig blau und unterstrichen. Basierend auf diesen Regeln können alle Elemente auf der Seite in zwei Kategorien unterteilt werden: Blockelemente (block) und Inline-Elemente (inline). Zum Beispiel ist <div> ein Blockelement, während <span> oder <a> Inline-Elemente sind. Das Standardverhalten kann durch die Verwendung der CSS-Eigenschaft display geändert werden.

Wenn überhaupt keine Styles angewendet werden, erstellt der Browser den normalen Fluss aus den Elementen. Das Verhalten von Blockelementen im normalen Fluss unterscheidet sich vom Verhalten von Inline-Elementen.

Der Formatierungskontext beschreibt die Regeln zur Anordnung von Inline- und Blockelementen im normalen Fluss. Blockelemente nehmen am Blockformatierungskontext teil, während Inline-Elemente den Inline-Formatierungskontext bilden. Die Anordnung von Elementen im Formatierungskontext hängt von der Schreibrichtung der Sprache ab. Zum Beispiel lesen und schreiben wir Texte in europäischen Sprachen von links nach rechts und von oben nach unten. Das bedeutet, dass standardmäßig im Formatierungskontext Blockelemente von oben nach unten und Inline-Elemente von links nach rechts angeordnet werden. Jedoch, für ostasiatische Sprachen wie Chinesisch, Japanisch und Koreanisch, wenn eine vertikale Schreibweise verwendet wird, sehen wir ein vollkommen anderes Bild: Blockelemente werden von rechts nach links angeordnet, während Inline-Elemente von oben nach unten platziert werden.

In allen folgenden Beispielen wird das Schreiben von links nach rechts und das Anordnen von Blöcken von oben nach unten, wie es für europäische Sprachen typisch ist, betrachtet. Die gleichen Erklärungen können jedoch auch auf andere Schreibrichtungen angewendet werden.

Sind so angeordnet, dass sie übereinander gestapelt sind und immer die gesamte verfügbare Breite des übergeordneten Elements einnehmen. Die Höhe eines Blockelements entspricht standardmäßig der Höhe seines Inhalts. Zum Beispiel würden drei aufeinanderfolgende Absätze in HTML genau in dieser Reihenfolge und auf der Seite angeordnet sein.

Selbst wenn die Breite eines Blockelements explizit festgelegt ist und Platz für ein weiteres solches Element auf der rechten Seite vorhanden ist, werden die Elemente dennoch im normalen Fluss untereinander angeordnet.

Man kann sich ein Blockelement wie eine Boje vorstellen, die darauf abzielt, so weit wie möglich auf der Seite aufzusteigen. Sie steigt auf, bis sie entweder auf ein anderes Element oder auf die Grenze des übergeordneten Elements trifft.

Werden hintereinander angeordnet, ähnlich wie Wörter in einem Satz. Abhängig von der Schreibrichtung in einer bestimmten Sprache können die Elemente von links nach rechts (wie zum Beispiel Deutsch), von rechts nach links (wie im Hebräischen) oder sogar von oben nach unten (wie bei Hieroglyphen und Silbenschriften im japanischen vertikalen Schreiben) angeordnet werden. Die Breite und Höhe eines Inline-Elements entsprechen der Breite und Höhe seines Inhalts. Im Gegensatz zu einem Blockelement können wir die Breite und Höhe eines Inline-Elements nicht über CSS kontrollieren. Mehrere Inline-Elemente werden versuchen, sich in derselben Zeile zu befinden, so weit es die Breite des übergeordneten Elements zulässt. Wenn die Breite des übergeordneten Elements nicht ausreicht, wird der überschüssige Text des Inline-Elements auf die nächste Zeile umbrochen.

Auch als Margin-Collapsing bezeichnet, ist ein Phänomen in CSS, bei dem die vertikalen Abstände zwischen Blöcken im Rahmen des Blockformatierungskontexts durch das CSS-Attribut margin festgelegt werden. Wenn einem Block ein unterer Margin und dem nächsten Block ein oberer Margin zugewiesen sind, könnte man erwarten, dass der endgültige Abstand zwischen den Blöcken die Summe dieser beiden Margins ist. Gemäß der Spezifikation werden jedoch die angrenzenden Margins "zusammengefasst". Das bedeutet, dass sie gewissermaßen ineinander fallen. Der endgültige Margin entspricht dem größeren der beiden Margins.

Wenn dem ersten Kind-Element eines Blocks ein oberer Margin zugewiesen ist oder dem letzten Element ein unterer Margin, dann "fallen" diese Margins buchstäblich aus dem Block heraus und wirken sich auf den äußeren Raum, den sogenannten "äußeren Welt", des Blocks aus.

Das "Ausbrechen" von Margins aus dem Elternelement kann auf verschiedene Arten verhindert werden:

1. Durch Festlegen eines vertikalen Innenabstands (padding-top oder padding-bottom) für das Elternelement, abhängig davon, von welcher Seite das Ausbrechen verhindert werden soll.
2. Durch Festlegen eines oberen oder unteren Rahmens für das Elternelement, wieder abhängig von der gewünschten Richtung. Der Rahmen kann transparent sein, solange er vorhanden ist :)
3. Durch Festlegen der overflow-Eigenschaft des Elternelements auf einen Wert, der sich von visible unterscheidet.
4. Durch Überschreiben der display-Eigenschaft des Elternelements auf flex oder grid.

Zuvor haben wir festgestellt, dass alle Elemente standardmäßig im normalen Fluss liegen. Dieses Verhalten kann jedoch mit Hilfe einiger CSS-Eigenschaften geändert werden. Wenn sich die Werte dieser Eigenschaften ändern, interagiert das Element nicht mehr mit den anderen Blöcken im Fluss. Man sagt, es ist "aus dem Fluss" getreten.

Es ist wichtig zu beachten, dass Elemente, die aus dem Fluss getreten sind, innerhalb ihrer Grenzen einen eigenen Mini-Fluss erstellen. Ihre Kind-Elemente unterliegen weiterhin den Regeln der Interaktion im Fluss, jedoch nur im Kontext ihres Elternelements.

Wenn ein Element floatend gemacht wird, hört es auf, mit anderen Elementen im Blockformatierungskontext zu interagieren. Gleichzeitig interagiert es weiterhin mit dem Inline-Formatierungskontext. Textelemente umfließen einen solchen floatenden Block von einer Seite.

Wenn einem Element eine absolute oder feste Position zugewiesen wird, führt dies ebenfalls dazu, dass es aus dem Fluss tritt. In diesem Fall nimmt das Element jedoch nicht einmal am Inline-Fluss teil.

Bei absolutem oder festem Positionieren wird das Element gewissermaßen über dem Inhalt der Seite platziert und wird für alle anderen Blöcke "unsichtbar".