Linke Spalte

#links {
  float: left;
  width: 200px;
  padding: 10px;
  ...
}

Die linke Spalte wird mittels float:left; positioniert.

In dieser Spalte stehen üblicherweise das Menu und einige andere Inhalte. Für diese Demonstration ist nur wichtig, dass die Inhalte der linken Spalte deutlich unterhalb der hellen Box in der rechten Spalte endet damit der Effekt, den der clear-Befehl auslöst, auch deutlich zu sehen ist.

Deshalb machen wir die Spalte einfach noch etwas länger durch sinnlosen Text. Deshalb machen wir die Spalte einfach noch etwas länger durch sinnlosen Text. Deshalb machen wir die Spalte einfach noch etwas länger durch sinnlosen Text. Deshalb machen wir die Spalte einfach noch etwas länger durch sinnlosen Text.

Inhaltsbereich

#content {
  width:auto;
  margin-left: 220px;
  ...
}

Ein einfaches 2-Spalten-Layout bei dem die linke Spalte als float definiert wurde. Soweit zur Vorbereitung.

Die helle Box hier links, direkt neben diesem Text ist nun ebenfalls mittels float:left; positioniert. Schließlich soll sich die Box in das flexible Layout möglichst gut einpassen.

Mit der nächsten Überschrift soll allerdings das Thema wechseln, daher soll auch der Fließtext spätestens an dieser Stelle unterbrochen werden. Dazu müssen wir dem H2-Tag der Überschrift den CSS-Befehl zum Clearen des Textflusses mitgeben. Im Quelltext sieht das folgendermaßen aus:

<h2 style="clear:left;"> ... </h2>

Also gut, es ist soweit. Direkt nach dieser Zeile sollte die Überschrift kommen.

Und hier ist die Überschrift

Vergrößern und verkleinern Sie Ihr Browserfenster! Sehen Sie, was passiert?

Der clear-Befehl beendet den Textfluss. Allerdings haben wir eine linke Spalte, die ebenfalls als float-Umgebung definiert wurde. Hier wird die globale Wirkungsweise des clear-Befehls sichtbar. Die Überschrift beginnt plötzlich erst unterhalb des Endes der linken Spalte.

Es entsteht ein vertikaler Zwischenraum weil der clear-Befehl alle floats einbezieht und somit das untere Ende der linken Spalte maßgebend wird.