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 http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png

why does it do this instead http://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png

Long version:
Non-positioned, non-floated, block-level elements act as if the floated element is not there, since the floated element is out of flow in relation to other block elements. And inline elements wrap around the floated elements to acknowledge their presence. I know how the overflow property works and where to apply it, and that clearing floats is best done with a clearfix and not the overflow property (although some cases may call for the usage of overflow clearing instead). However, I still don't understand why it expands the parent element, especially when we use overflow:hidden. Why don't the parent element just "hide" the overflowing floated child element? After all, aren't we hiding overflow?

Haydon

Please post some code to demonstrate your problem. Preferably with a JSFiddle. – Parbuckle

This is a theoretical question. I don't have a problem per say. I want to know why overflow property is expanding the parent element generally, instead of say, hiding the floated elements. If you need a primer on floats and overflow method, please check out the section titled "The Great Collapse" on css-tricks.com/all-about-floats – Haydon

didnt mean to offend. Apologise if I did. 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 css-tricks.com/wp-content/csstricks-uploads/… – Haydon

why does it do this instead css-tricks.com/wp-content/csstricks-uploads/overflow-float.png – Haydon

why does it expand instead of hiding? – Haydon

possible duplicate of Why does overflow hidden stop floating elements escaping their container? – Metonymy

Answer 1

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?

Millman

Answer 2

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/

Ataliah