Description

Clearfix is a name given to a CSS solution of an old issue where a the containers of floated element ignore the dimensions of the float and collapse.
Originally this problem was solved by adding extra markup after the float such as a <BR>, <DIV>. Adding extra markup, with no semantic meaning was look upon as a necessary evil, until we came up with a CSS only solution.

Screen shots of the example below

IE6 clearfix testIE7 clearfix testIE8 clearfix testIE9 clearfix testFirefox 3 clearfix testFirefox 13 clearfix testChrome 1 clearfix testChrome 10 clearfix testChrome 19 clearfix testSafari 4Safari 5.1Opera 10
See also:

Live Example
Play with the code in the textarea below.

Introduced in CSS version
1
Applies to elements
Containers of floated elements
Inherited
N/A
Browser Support
BrowsersIEFirefoxSafariOperaChrome
Versions
Belongs to:

See the full list CSS properties and browser support: CSS Properties