- 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
- Contained Floats, the clearfix technique By Tony Aslett
- Containing Float Elements by Gary Turner
- How To Clear Floats Without Structural Markup by Big John
- Easy Clearing by Claire "Suzy" Campbell
- 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
Browsers IE Firefox Safari Opera Chrome Versions
Belongs to:
See the full list CSS properties and browser support: CSS Properties