CSS Floats: Rule 1
The left (or right) outer edge of a floated element may not be to the left (or right) of the inner edge of its containing block.
A 300 × 300 left-floating element
Per rule 1, this left-floating element presses up against the inside left margin of its containing box (<div id="content">), without overlapping that box's left margin. Click "overlap" above to see an example of the behavior that a left floated element may not express.A left floating element may not overlap its parent's left margin; similarly, a right floating element may not overlap its parent's right margin. Click the “overlap” button to see an example in which this rule is violated.