30

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/

3
  • 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 8, 2012 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: jsfiddle.net/TheNix/fSBhT and an article on it: nicolasgallagher.com/micro-clearfix-hack
    – Nix
    Feb 8, 2012 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 perishablepress.com/press/2009/12/06/new-clearfix-hack Feb 8, 2012 at 12:40

2 Answers 2

24

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

5

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.

1
  • Exactly. I should add that there's a subtle difference between clearing floats and using overflow. See the second part of this answer.
    – BoltClock
    Feb 8, 2012 at 13:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.