Um ein bisschen Gefühl für den Flow zu bekommen, wird vor der Zähmung der Widerspenstigen beim Layouten zunächst das natürliche Verhalten der Boxen in freier Wildbahn studiert.

Drei Boxen im Fluss

Schauen Sie sich folgendes HTML und CSS an:

Weil div ein Block-Element ist, stehen die drei Kästen untereinander, auch wenn sie nur wenig Inhalt haben.

Abbildung 12.1: Block-Elemente werden so breit, wie es geht, und stehen untereinander

Ein Block-Element ist von Natur aus raumgreifend veranlagt und nimmt immer die verfügbare Breite des Eltern-Elements ein, in diesem Fall also von body.

Drei verkürzte Boxen im Fluss

Im nächsten Schritt werden die drei div-Geschwister mit width auf 20% verkürzt:

div {
  width: 20%; 
  background-color: white;
  padding: 10px;
  border: 1px solid black;
  margin: 5px;
}

Alles andere bleibt unverändert. 3 mal 20 sind 60. Stehen die Boxen jetzt nebeneinander? No. They don’t. Auch die kurzen Boxen stehen untereinander (siehe Abbildung 12.2). div ist ein Block-Element, und Block-Elemente haben einen integrierten Zeilenumbruch. Die Eigenschaft width verkürzt die Box zwar, der Zeilenumbruch aber bleibt. 

Abbildung 12.2: Auch die kurzen Boxen bleiben untereinander

Dieses normale Verhalten der Boxen im Flow wird im CSS-Jargon übrigens auch als position:static bezeichnet. Ausgerechnet die Positionierung, die dem natürlichen Fluss der Elemente freien Lauf lässt, bekommt den Namen static. Such is life.