CSS Floats: Rule 2

The left (or right) outer edge of a floated element must be to the right (or left) of the right (left) outer edge of a left–floating (or right–floating) element that occurs earlier in the document's source, unless the top of the later element is below the bottom of the former.

This rule ensures that no overlap occurs between consecutive left–floating or consecutive right–floating items. Let's consider three left–floating items, as defined above. The first element, a left–floating 500 × 200 <div>, takes up 500 pixels of the parent block's available 900 pixels of width. Per rule 1, it presses up against the inside left margin of its containing/parent block.

The next left–floating element, a 150 × 200 <div>, presses up against the first floated element — it doesn't overlap the first floating element. This is what the current rule explains.

Now consider the third left–floating element, identical to the second. If some content, say a paragraph, for example, were to be placed between the second and third floating elements such that it would fill the space currently taken up by the third floating element, then this third floating element's top would be below the bottom of the former. Click the “push” button above to see an example of what I just discussed.

With every click of successively-numbered radio buttons, a paragraph will appear along the right of the second floated element. The higher the number you click, the more line boxes are generated, in turn pushing the third floated element down further. Finally, you'll find that the third floated element will be forced all the way to the left and underneath the first floated element. This is an example of, “unless the top of the later element is below the bottom of the former.”