The magic of “overflow: hidden”

Published on 9 January 2010

“overflow: hidden” is often used for the purpose of float containment. It can do more special things, however: prevent an element's margins from collapsing with its children and prevent an element from extending “behind” an adjacent floated element.

But it doesn’t make sense!

People often wonder why overflow: hidden results in floats being contained; if anything, they'd expect stuff to be hidden. Float containment is indeed just a side-effect – one that can be invoked by other properties as well (see below). What happens is that overflow: hidden makes the element establish a new block formatting context, or BFC. CSS 3 calls this a flow root. A BFC has several unique characteristics, as detailed in the sections below. The following property/value combinations will cause an element to establish a new BFC:

float: left and float: right
display: inline-block, display: inline-table, display: table-cell and display: table-caption
position: absolute and position: fixed
overflow: hidden, overflow: auto and overflow: scroll and their overflow-x and overflow-y counterparts.

It's not hard to understand why overflow: hidden (or overflow: auto) is generally used for establishing a new BFC: all other options either have often highly undesirable side-effects, or are unsupported by Internet Explorer 7 and below.

Float containment

Float containment is without a doubt the most popular application of a BFC. My article “Float containment” goes into more detail about this.

Collapsing margins

Consider the following example:

This is a plain paragraph with a pink border and no margins. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

This paragraph is enclosed by a div element (with a solid color background) and has a top margin of 2em: notice how this margin protrudes its container!

While this particular example may look fine as is, this isn't always what we want. Using the BFC-mechanic, we can easily make the second paragraph's top margin be contained. Let's modify the previous testcase to include overflow: hidden on the enclosing element; everything else stays the same.

This paragraph is enclosed by a div element (with a solid color background) and has a top margin of 2em: notice how this margin no longer protrudes its container.

Making room for floats

Consider the following example:

This is a left-floated element, with slightly lowered opacity (in supporting browsers). Let's also add some filler text to make the element a bit taller.

This is a block-level element with no special styling other than a background color, a border and some padding.

As you can see, the non-floated element extends “behind” the floated element. The border makes this especially apparent. This is completely normal behaviour: floats are taken out of normal document flow. In the following testcase, we make the non-floated element establish a new BFC. Everything else stays the same.

This is a left-floated element, with slightly lowered opacity (in supporting browsers). Let's also add some filler text to make the element a bit taller.

This is a block-level element with a background color, a border, some padding, and overflow: hidden.

Now, the non-floated element neatly takes up the available space, taking into account the adjacent floated element as if it were in-flow.

And that, as they say, is that.