17

Anyone know why overflow:hidden forces an element with floated elements to wrap the elements?

I really want to understand the inner workings rather than just using it and trusting that 'it just works'.

I can understand how it works when the containing element is floated in the same direction as child elements that are floated, but overflow:hidden means to crop overflowing content (when used with position:absolute/relative).

Any info appreciated.

Mark McDonnell
  • 213
  • 2
  • 6
  • For the record: any value (except `visible`) of `overflow` will do; as per the CSS specs. See also quirksmode on this issue: http://www.quirksmode.org/css/clearing.html – You Aug 03 '10 at 21:21

3 Answers3

10

Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, and elements with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts.

In a block formatting context, each box's left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box's line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).

The block formatting context clears the floats. Source: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
2

Full explanation from the Visual formatting model, part 9.2 "Floats" of the CSS2 specs:

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

You
  • 22,800
  • 3
  • 51
  • 64
0

Well, seems there is no 'actual' explanation for why this happens (not one that I can understand anyway - e.g. the CSS spec excerpt provided in one of the responses simply explained that a box with floated content should not expand to wrap the floated elements - which is fine and that is logical and I completely get that)

I was hoping this wasn't some random hack that forced the parent element to wrap it's floated child elements, but it seems every resource I look at just says to use it and not why it works.

Must just be a hack.

The most useful resource I came across (or the one that gave the most detail - albeit not as much details as I needed) was from Quirksmode: http://www.quirksmode.org/css/clearing.html

Thanks if anyone else can shed light as to whether this is a random browser rendering quirk or has a logical explanation for working the way it does.

M.

Mark McDonnell
  • 1
  • 2
  • Sorry, I retract my comment, I mis-read that completely. My apologies! Thank you for bringing me up on that, because I would have missed it altogether. – Mark McDonnell Aug 05 '10 at 15:27