Why overflow:hidden expands parent element (containing floated child elements)?

Question

In short:
Basically, I just want to know why overfow:hidden explands the container containing a floated item. Shouldnt it hide the overflowing element like in this image

Answer 1

This is a really good question despite others' comments.

The actual answer is "because someone decided it should work that way."

Fortunately, we can discuss the topic online, maybe influence those people, and sometimes even change things.

In the meantime you can always read "Why Containers Don’t Clear Themselves": http://css-tricks.com/containers-dont-clear-floats/

Answer 2

It is a very good question. I gave it a thought.

overflow:hidden set on the parent element clips the overflow of the child elements when the parent element has a height or width defined (I tested it). overflow:hidden expands parent element (containing floated child elements) in the case either height or width of the parent element is not determined.

So, what seems to happen is that overflow:hidden set on the parent element enters in action and looks for an area to be applied. As the parent element does not have height and width set, that same area will be yielded by the size of the child elements. Simultaneously, after the area is set there is nothing to be cut since the child floating elements are providing the area to make a clipping from.

However, when you apply a box-shadow, for instance, to the child floated element, the box-shadow may be clipped, depending of the size of it, and that's one of the reasons why perhaps the best solution to expand a parent element (containing floated child elements) is the solution 1 provided by A.M.k for this question How do you keep parents of floated elements from collapsing?