Es ist ein verbreitetes Missverständnis, dass Block-Elemente, die auf ein gefloatetes Element folgen, ebenfalls entlang der Seite des Floats angeordnet werden. Das stimmt nicht. Es sind in der Tat nur die Zeilenboxen (lineboxes) innerhalb der Block-Elemente, die sich so verhalten.

Erinnern Sie sich, dass ich erwähnte, gefloatete Elemente seien aus dem Fluss der HTML-Elemente herausgenommen? Die Spezifikation verlangt, dass Zeilenboxen, die hinter ein Float rutschen würden, soweit verkürzt werden, dass sie "im Freien" bleiben. Das bedeutet, dass Text und Inline-Grafiken niemals von einem Float zugedeckt werden können, außer wenn sich gefloatetes Element und Inline-Element in separaten Containern befindet.

Ein verbreitetes Problem mit gefloateten Elementen ist, wie man den Text, der entlang des Floats fließt, davon abhält, die Seiten des Floats zu berühren. Es funktioniert nicht, dem Text Polsterung (padding) oder Rand (margin) zuzuweisen, weil diese Eigenschaften auf der linken Seite der Zeilenbox zum tragen kommen und die befindet sich ja hinter dem gefloateten Element. Die richtige Vorgehensweise ist, dem Float selbst einen Rand zu geben und dadurch die Zeilenboxen davon zu überzeugen, dass das gefloatete Element "größer" ist, als es erscheint. Dadurch werden die Zeilenboxen verkürzt und ein Abstand entsteht. Die meisten Float-Elemente haben einen solchen Rand nur auf derjenigen Seite, die dem Text zugewandt ist sowie auf ihrer Unterseite.

Hier kann man das schön sehen, denn ich habe der floatBox mit margin einen Außenrand zugewiesen. Diesen Abstand könnte man in diesem Beispiel auf die linke Seite der box beschränken. weiter