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 both paragraphs: