Why does overflow hidden stop floating elements escaping their container?

Question

A common problem that I have with web pages is floating divs creeping outside of their containers.

#wrapper{
    border:1px solid red;
}

#wrapper div{
    f         


        

Answer 1

It creates a block formatting context.

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

see also: http://www.w3.org/TR/CSS2/visuren.html#block-formatting