Question

Anyone know why overflow:hidden forces an element with floated elements to wrap the elements?

I really want to understand the inner workings rather than just using it and trusting that ‘it just works’.

I can understand how it works when the containing element is floated in the same direction as child elements that are floated, but overflow:hidden means to crop overflowing content (when used with position:absolute/relative).

Any info appreciated.

Answer 1

Floats, absolutely positioned
elements, inline-blocks, table-cells,
table-captions, and elements with
‘overflow’ other than ‘visible’
(except when that value has been
propagated to the viewport) establish
new block formatting contexts.

In a block formatting context, each
box’s left outer edge touches the left
edge of the containing block (for
right-to-left formatting, right edges
touch). This is true even in the
presence of floats (although a box’s
line boxes may shrink due to the
floats), unless the box establishes a
new block formatting context (in which
case the box itself may become
narrower due to the floats).

The block formatting context clears the floats. Source: http://www.w3.org/TR/CSS2/visuren.html#block-formatting