Overflow: hidden is a setting that is meant for boxes with set widths or heights (or both), to hide any child content that is larger.
Here, any inside content that is wider than 400px or taller than 300px will disappear, and is not accessible to the user.
If it's overflow: auto, the box doesn't grow but the children are accessible because there's a scrollbar.
That's overflow's Day Job. The default on all elements is "overflow: visible" and normally, on a box with height and width set, any overflowing children just spill out. You'll only see that they are spilling out if the container has a background colour, background image, or border.
It happens that if a box has no dimensions, you can still put overflow: hidden on it.
In order for a box to deal with overflow, it must know if its children are larger than its dimensions... even if it doesn't have any explicitly set dimensions in the CSS. So, this includes floats too. The rules change, and the box can "see" the bottoms of its floated children.
Using a copy of IE7 or IE6, and then a modern browser (any other browser), you can see it happening in these pages. There's float clearing in there, and then float enclosing. Overflow encloses floats.
http://gtwebdev.com/workshop/floats/enclosing-floats.php explains as well.