Why Does Overflow: Hidden Have the Unexpected Side-Effect of Growing in Height to Contain Floated Elements

Why does overflow: hidden have the unexpected side-effect of growing in height to contain floated elements?

To put it most simply, it is because a block box with an overflow that isn't visible (the default) creates a new block formatting context.

Boxes that create new block formatting contexts are defined to stretch to contain their floats by height if they themselves do not have a specified height, defaulting to auto (the spec calls these boxes block formatting context roots):

10.6.7 'Auto' heights for block formatting context roots

In certain cases (see, e.g., sections 10.6.4 and 10.6.6 above), the height of an element that establishes a block formatting context is computed as follows:

[...]

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

This was not the case in the original CSS2 spec, but was introduced as a change in CSS2.1 in response to a different (and much more pressing) issue. This answer offers an explanation for the changes. For this reason, it seems quite apt to call it a side effect, although the changes were very much intentional.

Also note that this is not the same thing as clearing floats (clearance). Clearance of floats only happens when you use the clear property and there are preceding floats to be cleared:

• If you have an element with clear: both that's a sibling of the outer element in your example, the floats will be cleared but the outer element will not stretch.

• If you have a similar element (or pseudo-element) as the last child of the outer element instead (making it a following sibling of the floats), the outer element will stretch downward in order to contain the bottom edge of that element, and for a zero-height element that essentially means the bottommost edge of the floats. This technique is known as "clearfix" because the element (or pseudo-element) has no other purpose than to force the outer element to contain the floats by way of clearance within it.

In the code why does removing overflow:hidden; from ul in css style, hides the menu?

Your menu didn't disappear, it is still there! You can inspect it like @Fran suggested or simply roll-over your mouse over it's area and you will see it getting highlighted. The behavior you are experiencing is because overflow: hidden; causes a new formatting to your block, that means that without it each element will follow it's own formatting and displays with the normal flow. Checkout this link for more details on block formatting context.

Why does 'overflow: auto' clear floats? And why are clear floats needed?

The reason why the wrapper doesn't stretch to contain its floats by default is because the floats are taken out of the normal flow of the wrapper, so the wrapper acts as if they were never there. If there is no other content in the wrapper, that means the wrapper won't have any height.

Note that overflow: auto doesn't clear floats — it just causes the element to contain its floats by way of establishing a new block formatting context for them so that they don't intrude to other elements in the parent context.¹ That is what forces the parent to stretch to contain them. You can only clear a float if you add a clearing element after the float. A parent element cannot clear its floating children.

The reason why establishing a new BFC causes an element to contain its floats is detailed here, and the reason why overflow: auto would even cause a BFC to be established is detailed here.

---

¹ _{OK, maybe "just" wasn't exactly the best adverb to use.}

Overflow: hidden in CSS

overflow: hidden on a container simply hides any content that flows outside of the box, as demonstrated beautifully by the following diagram (courtesy of Chris Coyier/CSS-Tricks):

You might be using overflow: hidden as a kind of clearfix in this case, which is just a way to get a parent container to expand to the height of its floated children (as floated elements are taken out of the normal page flow). The difference between using overflow: hidden and overflow: visible on containers with floating children can be seen in the following demo.

fixed div width changes to 100% unexpectedly

You just need to add the overflow: auto; to both containers and then float your elements, the issue is that when you float the objects the containers will loose the height, you can read more here: why-does-overflow-hidden-have-the-unexpected-side-effect-of-growing-in-height-t. Here is a fiddle with your code and the overflow's fixed, I added an extra padding to the containers so you can check the results, if you remove the padding's it will still look like they dissapeared, I also made the white div to red to be more obvious the results.

---

Related Topics