Doesn't make sense to me either, it just works. I don't think there's a logical reason for it to work, but it does.
When you do overflow: hidden, the stuff outside the bounds of the container gets hidden. But you haven't specified a height on your container, so there are no outer bounds to the height of the element.
For the record, you could also use overflow: auto or overflow: scroll for the parent to expand to fit in all the child elements.
@, you could give the parent element a height, but most people use this method when there child elements are floated and have an undetermined height and/or need to be fluid. In this case, using overflow: auto/hidden on the parent expands the parent container so it wraps everything so that you can use margin-top on elements that have to sit underneath the float and have it actually work. NOTE: If you set a margin-top of 10px of an element after a float, and specify it to clear that float (like clear: both) the margin won't be 'obeyed' because it's being applied to whatever is the nearest element in normal document flow (whatever is before the float). That sounds complicated, but hopefully you can decipher it.