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

by

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.

More Related Contents:

  1. Make child visible outside an overflow:hidden parent
  2. Make floating child visible outside an overflow:hidden parent
  3. Could someone explain this CSS code?
  4. How to Create Grid/Tile View? [duplicate]
  5. What does the CSS rule “clear: both” do?
  6. Limit text length to n lines using CSS
  7. Floating elements within a div, floats outside of div. Why?
  8. How to float 3 divs side by side using CSS?
  9. CSS Floating Divs At Variable Heights [duplicate]
  10. Advantages of using display:inline-block vs float:left in CSS
  11. Overflow-x:hidden doesn’t prevent content from overflowing in mobile browsers
  12. parent & child with position fixed, parent overflow:hidden bug
  13. CSS – Overflow: Scroll; – Always show vertical scroll bar?
  14. How to vertically middle-align floating elements of unknown heights?
  15. Float right and position absolute doesn’t work together
  16. Make outer div be automatically the same height as its floating content
  17. Why “overflow: hidden” clears a float?
  18. How to get Floating DIVs inside fixed-width DIV to continue horizontally?
  19. CSS text ellipsis when using variable width divs
  20. Overflow to left instead of right
  21. CSS: How to have position:absolute div inside a position:relative div not be cropped by an overflow:hidden on a container
  22. CSS container div not getting height
  23. Bootstrap change div order with pull-right, pull-left on 3 columns
  24. How do I keep CSS floats in one line?
  25. Have a fixed position div that needs to scroll if content overflows
  26. How to fix Internet explorer 7 bug when using percentage widths for layout?
  27. CSS Floating Divs with different height are aligned with space between them
  28. Horizontal scroll in DIV with many small DIV’s inside (no text)
  29. overflow: hidden on div and body, different behavior
  30. Stacking DIVs on top of each other?

Leave a Comment