31

A common problem that I have with web pages is floating div tags creeping outside of their containers, like shown in the snippet.

#wrapper {
  border: 1px solid red;
}

#wrapper div {
  float: left;
  font-size: 3em;
}
<div id="wrapper">
  <div>Hello World</div>
</div>

There are a lot of dirty ways to fix this (i.e., inserting a div with clear:both)

However, a much neater solution I have seen is setting the wrapper div with overflow set to hidden:

#wrapper {
  border: 1px solid red;
  overflow: hidden;
}

#wrapper div {
  float: left;
  font-size: 3em;
}
<div id="wrapper">
  <div>Hello World</div>
</div>

This works well across browsers, nice and cleanly with no additional markup. I am happy, but I have no idea WHY it works this way?

All the documentation, I had looked at, indicates overflow:hidden is for hiding content, not resizing a parent to fit its children...

Can anybody offer a explanation for this behavior?

Thanks

Original snippets: Live example 1: http://jsfiddle.net/ugUVa/1/ Live example 2: http://jsfiddle.net/ugUVa/2/

Teocci
  • 7,189
  • 1
  • 50
  • 48
Chris
  • 6,076
  • 11
  • 48
  • 62
  • 8
    Once an element is floated, it's essentially removed from the document flow for sizing calculations. Since the container is now "empty", it shrinks down to the minimum allowed size. Adding the clearing element, or setting overflow forces the container to consider everything inside for sizing, including floated elements that would otherwise be ignored. – Marc B Feb 08 '12 at 12:27
  • 1
    I know you are looking for an explanation, and not a fix, but you could also use the clearfix hack. Basically the same as the `clear:both;` div, but with no additional markup. See my example: http://jsfiddle.net/TheNix/fSBhT/ and an article on it: http://nicolasgallagher.com/micro-clearfix-hack/ – Nix Feb 08 '12 at 12:38
  • On containing floats, you can use `:after` to achieve this (and `zoom: 1` to reproduce the effect in IE 6 and 7, which don’t support `:after`) — see http://perishablepress.com/press/2009/12/06/new-clearfix-hack/ – Paul D. Waite Feb 08 '12 at 12:40

2 Answers2

25

It creates a block formatting context.

Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context.

see also: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Yoshi
  • 54,081
  • 14
  • 89
  • 103
6

It's correct that the overflow style is intended to control what happens to overflowing content.

The effect on the floating elements is a side effect of the overflow style creating a block formatting context for the element.

When you don't specify a size for the containing element, the block formatting context gets its size from the elements that it contains, so that is the size that the containing element gets.

Guffa
  • 687,336
  • 108
  • 737
  • 1,005
  • Exactly. I should add that there's a subtle difference between clearing floats and using `overflow`. See the second part of [this answer](http://stackoverflow.com/a/6482054/106224). – BoltClock Feb 08 '12 at 13:08