Clearfix

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

See also:

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.

<!doctype html>
<html>
<head>
<style type="text/css">
body{width:600px;}
div{
  border:solid 1px #000;
  background:#00FF16;
  margin:2em;
  padding:2px;  /* easier to see */
}
p{
  border:solid 1px #000;
  background:#CCC;
  float:left;
  width:75%;
  margin:0;
  padding-left:.5em;
}

.clearfix:after{
  content: ".";
  display: block;
  height: 0;
  font-size:0;    
  clear: both;
  visibility:hidden;
}
    
.clearfix{display: inline-block;}

/* Hides from IE Mac */
* html .clearfix {height: 1%;}
.clearfix{display:block;}
/* End Hack */

.cf:before,
.cf:after {
  content:"";
  display:table;
}
.cf:after {
  clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
  *zoom:1;
}

.cf5:before,
.cf5:after {
  content:".";
  display:table;
  height: 0;
  font-size:0; 
  line-height:0;   
  visibility:hidden;
}
.cf5:after {
  clear:both;
}
.cf5 {
  *zoom:1;
}
 
.btcf:after{
  content:"";
  display:table;
  clear:both;
}

br{clear:both;}

.overflow{
   overflow:hidden;
   width:auto;
}

</style>
</head>
<body>

<div><p>No clearfix </p></div>

<div><p>Extra BR element. Ye Olde Way</p> <br /></div>
  
<div class="clearfix"><p><a href="http://csscreator.com/attributes/containedfloat.php">Original Clearfix</a> Tony Aslett</p></div>

<div class="cf5"><p>Combination of Original and micro</p></div>
  
<div class="cf"><p><a href="http://nicolasgallagher.com/micro-clearfix-hack/">Micro Clearfix</a> Nicolas Gallagher</p></div>
  
<div class="btcf"><p><a href="http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php">Beat that Clearfix</a> Thierry Koblentz</p></div>

<div class="overflow"><p><a href=""><a href="http://gtwebdev.com/workshop/floats/enclosing-floats.php">Overflow</a> Gary Turner</p><br /></div>
  
</body>
</html>

Introduced in CSS version

Applies to elements

Containers of floated elements

Inherited

N/A

Browser Support

Browsers	IE	Firefox	Safari	Opera	Chrome
Versions

Belongs to:

Fixes

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

Screen shots of the example below

User login

Navigation