CSS Floats: Rule 4

A floating element's top may not be higher than the inner top of its parent. If a floating element is between two collapsing margins, it is placed as though it had a block–level parent element between the two elements.

The first sentence of the rule can be summarized as, “don't float above my parent.” That's it. Simple.

The second sentence can be interpreted as, “a floated element between overlapped margins will now behave as though it were placed within a <div>.”

Consider the following three paragraphs, rendered in red, green, and red, respectively. The second paragraph, whose content is in green and wrapped in a rounded black border, is floated right, while the surrounding paragraphs are rendered normally. Note that it floats up to the bottom margin of the first paragraph, which is a block–level element. In essence, the floated element treats the bottom margin of the previously-unfloated block–level element as the ceiling to which it will float, like a balloon released in a room. In Meyer's words, “This prevents the floated paragraph from moving up to the top of whatever parent the three paragraphs share.”