Why does the overflow hide, stopping moving items from the container?

Question

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

#wrapper{ border:1px solid red; } #wrapper div{ float:left; font-size: 3em; } ... <div id="wrapper"> <div>Hello World</div> </div> 

Real-time example: http://jsfiddle.net/ugUVa/1/

There are many dirty ways to fix this (insert div with clear: both)

The much clearer solution I've seen sets the style of overflowing divs divs to hidden:

Example: http://jsfiddle.net/ugUVa/2/

This works well in browsers, nice and clean, without extra markup. I am happy, but I have no idea WHY it works!

All the documentation I was looking at indicates an overflow: the hidden one is for hiding the contents, not for resizing the parent for his children ...

Can anyone suggest an explanation for this behavior?

thank

Answer 1

Creates a block formatting context.

Block formatting contexts are important for positioning (see float) and clearing (see clearing) of floats. The rules for placing and cleaning floats apply only to things inside the same context formatting block. Floats do not affect the arrangement of things in other block formatting contexts, and clear clears only gaps into the same block formatting context.

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

Answer 2

That's right, the overflow style is designed to control what happens with content overflow.

Influence on floating elements is a side effect of the overflow style, which creates a block formatting context for the element.

When you do not specify a size for the containing element, the formatting context of the block gets its size from the elements contained in it, so this is the size that the contained element receives.