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's correct that the overflow style is intended to control what happens to overflowing content.

The effect on the floating elements is a side effect of the overflow style creating a block formatting context for the element.

When you don't specify a size for the containing element, the block formatting context gets its size from the elements that it contains, so that is the size that the containing element gets.