CSS Floats: Rule 7

A left (or right) floating element that has another floating element to its left (or right) may not have its right outer edge to the right (left) of its containing block's right (left) edge.

In other words, assuming it is not too wide to fit on its own, the first in a succession of left–floating items that exceeds its parent element's right edge will be placed beneath an earlier left–floating element. Without this rule, the 300 × 50 pixel image —the fourth of seven left–floating elements— would exceed its container's right edge. The last 200 × 200 pixel is also affected by this rule.

[A left-floating 200 × 200 floating image.]

¶1: 198px × 100px

[A left-floating 200 × 200 floating image.] [A left-floating 300 × 50 floating image.]

¶1: 198px × 100px

[A left-floating 200 × 200 floating image.] [A left-floating 300 × 50 floating image.]