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 [Image download must be enabled for this test] 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):

[D]

This example comes directly from CSS 2.1, Section 9.5 Float.
Note: Firefox 2.0.0.6, 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:
Image showing a floating image and the effect of 'clear: left'

[D]