How does CSS 'overflow:hidden' work to force an element (containing floated elements) to wrap around floated elements?

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

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