Float elements and parent container width (CSS stuff)

While doing some CSS stuff I encountered a new CSS thing to know with float-based layouting that I thought to share. A container (e.g. div) containing float elements doesn’t grow up around the floats (which causes some problems with borders & backgrounds, for example).

UPDATE: Nicolas Gallagher's Micro clearfix hack is probably the best solution nowadays (available as CSS for .clearfix for Bootstrap, for example)

(DEPRECATED: Some previous solutions in short)

• overflow: hidden OR overflow: auto
• create an extra element with clear: both

Some links with more details & demos:

• All about floats (css-tricks.com)
• Stack overflow answer with alternatives
• http://www.quirksmode.org/css/clearing.html