mitmario.dev

Abschnitt 8 · Lektion 1

Der normale Fluss

CSS Im Browser 4 Min Lesezeit 3 BeispieleLektion 1 von 8

Ein Bild, das unten aus seinem Kasten ragt, obwohl es darin steht, ist kein Fehler des Browsers. Es ist aus dem normalen Fluss genommen. Um diesen Fluss geht es hier zuerst, denn im Rest des Abschnitts nimmst du Elemente gezielt daraus heraus.

Der normale Fluss ist die Anordnung, die entsteht, wenn niemand etwas anderes verlangt. Praktisch jede Seite steht auf ihm, und viele Layout-Probleme lösen sich, wenn man ihn einfach machen lässt.

Zwei Sorten Kästen

Block stapelt, inline fließt 
body {
  font-family: system-ui, sans-serif;
}

/* Blöcke nehmen die volle Breite und stapeln sich,
   auch wenn nur ein Wort darin steht. */
.block {
  background-color: #dbeafe;
  margin-bottom: 8px;
}

/* Vier Angaben an einem Inline-Element, und nur eine
   davon wirkt: Breite, Höhe und der senkrechte Abstand
   werden ignoriert, die Farbe kommt an. */
.inline {
  background-color: #fef9c3;
  width: 300px;
  height: 80px;
  margin-top: 48px;
}

Block-Elemente stapeln sich von oben nach unten und nehmen die volle verfügbare Breite. Überschriften, Absätze, div, section und Listen sind Blöcke.

Inline-Elemente fließen wie Wörter in der Zeile weiter und brechen mit ihr um. span, a, strong, em.

An den gelben Kästen im Beispiel siehst du die Stelle, an der man stolpert. An einem Inline-Element wirken Breite, Höhe und senkrechte Außenabstände nicht. Man schreibt sie hin, es passiert nichts, und man verdächtigt den Selektor. Der Grund ist der Fluss selbst. Eine Zeile lässt sich nicht von einem einzelnen Wort auseinanderdrücken, sonst wäre die Zeilenhöhe nirgends mehr verlässlich.

Hier stehen im Auskunftsstreifen zum ersten Mal im Kurs zwei verschiedene Wahrheiten nebeneinander. Kurz hinzusehen lohnt sich. Am gelben Inline-Element steht im Reiter „Werte“ width: 300px, height: 80px und margin: 48px 0px 0px, also genau das, was du geschrieben hast. Ganz oben im Streifen steht neben dem Elementnamen das gemessene Maß, und das ist rund 146 × 19.

Beides stimmt. Der Wert gilt, er wird nur nicht benutzt, denn ein Inline-Element kann mit ihm nichts anfangen. Beim Block darüber passen die beiden Angaben zusammen. Bei der Breite, mit der die Spalte startet, stehen dort width: 364px und gemessene 364 × 19.

Mit diesem Unterschied lässt sich später eine ganze Reihe von Fällen erklären. Im Reiter „Werte“ steht der Wert, mit dem der Browser rechnet. Oben als Maß steht das Ergebnis. Wo die beiden auseinandergehen, hat eine Regel des Layouts dazwischengefunkt.

Die Lösung kennst du aus Lektion 4.5, nämlich display: inline-block oder gleich block. Dort steht auch die Ausnahme, die man hier leicht übersieht. Ein img ist ebenfalls inline und nimmt Breite, Höhe und senkrechte Außenabstände trotzdem an, weil sein Inhalt vom Browser kommt und eigene Maße mitbringt.

Textumfluss mit float

Text um ein Bild 
p {
  max-width: 420px;
  margin-bottom: 24px;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  background-color: #f4f4f5;
}

.mit img {
  float: left;
  margin-right: 16px;
}

float nimmt ein Element aus der normalen Reihenfolge und schiebt es an den linken oder rechten Rand seines Containers. Der Text daneben legt sich darum.

Bis etwa 2015 wurden mit float ganze Seitenlayouts gebaut, weil es nichts Besseres gab. Zwei Spalten, drei Spalten, Navigationsleisten, alles schwebte. Das war nie dafür gedacht und entsprechend mühsam.

Heute gibt es Flexbox und Grid. Für float bleibt der eine Fall übrig, für den es erfunden wurde, nämlich ein Bild, um das Text herumfließen soll. Für alles andere ist es die falsche Wahl.

clear ist der Gegenspieler. Mit clear: left beginnt ein Element erst unterhalb aller linken Floats. Man braucht es selten, seit es die Lösung im nächsten Abschnitt gibt.

Der Container, der zusammenklappt

Der Container klappt zusammen 
.kasten {
  margin-bottom: 32px;
  font-family: system-ui, sans-serif;
  background-color: #fef9c3;
  border: 2px solid #a16207;
}

.kasten img {
  float: left;
  margin-right: 16px;
}

.kasten p {
  margin: 0;
}

/* Ein schwebendes Kind zählt für die Höhe des Elternteils
   nicht mit. Der gelbe Kasten endet deshalb oben. */
.ohne {
  display: block;
}

/* flow-root macht aus dem Kasten einen eigenen kleinen
   Fluss, und darin zählt das Bild wieder mit. */
.mit {
  display: flow-root;
}

Ein schwebendes Kind zählt für die Höhe seines Elternteils nicht mit. Diese Eigenheit hat float seinen Ruf eingebracht.

Im Beispiel steht ein hohes Bild in einem Kasten mit wenig Text. Der obere Kasten endet unter dem Text, und das Bild ragt aus ihm heraus. Sein Rahmen läuft mitten durchs Bild. Das sieht nach einem Fehler aus und steht so im Standard.

Jahrelang half man sich mit einem leeren Element und clear: both darunter oder mit dem berühmten Clearfix aus einem ::after-Pseudoelement. Beides braucht man nicht mehr.

display: flow-root macht aus dem Element einen eigenen kleinen Fluss, und darin zählen die Floats wieder mit. Eine Zeile, kein zusätzliches Markup, kein Pseudoelement.

Nebenbei löst dasselbe Schlüsselwort ein zweites Problem. In einem flow-root fällt auch kein Außenabstand mehr aus dem Container heraus. Das ist das Margin Collapsing aus Lektion 4.4, und von den Gegenmaßnahmen, die dort aufgezählt sind, ist flow-root die sauberste.

Was das Herausnehmen kostet

In den nächsten sechs Lektionen geht es darum, Elemente aus dem Fluss zu nehmen oder in ihm zu verschieben. Jede dieser Möglichkeiten kostet etwas. Ein Element außerhalb des Flusses macht keinen Platz mehr für sich frei. Alles, was darunter liegt, weiß nichts von ihm.

Ich positioniere deshalb nur, was sich anders nicht bauen lässt. Dazu gehören ein Badge wie „Neu“ in einer Kartenecke, ein Overlay über einem Bild und eine klebende Kopfzeile, und für solche Fälle ist position gemacht. Zwei Spalten nebeneinander sind dagegen eine Aufgabe für Flexbox oder Grid, und ein Abstand zwischen zwei Absätzen eine für margin.

In der Aufgabe fließt erst einmal Text um ein Bild, ganz ohne position.

Zum Mitnehmen

Im normalen Fluss stapeln sich Blöcke, und Inline-Elemente fließen mit. Ein Float ragt aus seinem Kasten heraus, weil der ihn bei der Höhe nicht mitrechnet, und display: flow-root holt ihn wieder herein.

Jetzt du

Basis Konto, kostenlos

Zu dieser Lektion gehört eine Aufgabe. Du schreibst den Code selbst, und nach jedem Lauf sagt dir eine Prüfliste, was schon stimmt.

Dafür brauchst du das Basis Konto. Es kostet nichts, und ein Passwort gibt es auch nicht.

Was in dieser Lektion steckt

  • Artikel mit 3 Beispielen zum Ausprobieren

    Steht hier, ohne Konto lesbar.

  • Aufgabe im Editor, direkt im Browser geprüft

    Öffnet sich mit dem Basis Konto.