When a containing block has a specified width (e.g. "width: 335px;"),
its child float (if sufficiently tall) must extend outside and below and
then the text of its next sibling must be "pushed aside".
Some sample text in the first paragraph. It has a floating image that
was right about here
(X) in the source. However, the image is so large that it extends below
the text of this paragraph.
The second paragraph is therefore also affected. Any
inline boxes in it are "pushed aside" as they are forbidden from coming
inside the area delimited by the floating image's margins. Note that the
paragraph boxes are still rectangular, but their borders and backgrounds
are "clipped" or interrupted by the floating image.
Expected results when setting paragraphs' width
to 335px (screenshot from W3C CSS 2.1):
This example comes directly from CSS 2.1,
Section 9.5 Float
Note: Firefox 220.127.116.11, Opera 9.23, Safari 3.0.3, Konqueror 3.5.8,
NS 7.0, NS 7.2, Seamonkey 1.x, Seamonkey 2.x, K-meleon 1.1.2,
Galeon 2.x, Epiphany 2.x all pass this test.
Expected results when setting clear: left to 2nd paragraph: