CSS: Wie muss man sich das mit float vorstellen?

Mit der CSS Eigenschaft float, kann man Objekte umfließen lassen. Float heißt soviel wie im Wasser schweben/treiben.

Am besten stellt man sich vor, dass man den Rahmen in der sich das Objekt befindet, geflutet wird durch float. Bei uns heißt dieser Div-Container Rahmen. Das Wasser drückt alles nach oben. Der nachfolgende Bereich (Inhalt, bzw. Content) wird durch das ansteigende Wasser nach oben gedrückt neben das Menü links. Alle darunter liegenden schiebt es genauso an die anderen ran, so dass keine Lücke entsteht. Das geht nur, wenn wir dem Inhalt nach dem float Objekt keine Breite oder Position zuweisen, also flüssig bleibt und sich um das Menü links verteilt.
Weisen wir dem Inhalt aber danach eine Breite zu, wird das ganze zu einem festen Objekt, das nur nach oben schwimmen kann, wenn genügend Breite rechts vom Menü (linke Seite) vorhanden ist.

Breite Inhalt muss < (kleiner) sein als Breite des freien Platz neben dem Menü links

Ist die festgelegte Breite des Inhalts kleiner als die freie Breite neben dem Menü, dann entsteht ein Loch mit der fehlenden Breite und die Hintergrundfarbe des Rahmen Divs schaut durch. Daher am besten nie eine Breite für den Inhalt nutzen, denn so passt der sich dann zu 100% dem freien Platz neben dem Menü links an.

Hat der Inhalt eine Positionsangabe, muss man sich das so vorstellen, dass der Inhalt festgebunden ist, oder einen Anker geworfen hat und so sich nicht bewegen trotz steigendem Wasser.

Beispiele dazu in der Kompozer Anleitung und Amaya Anleitung