Here we will explore 5 different CSS clearfix options. A “CSS clearfix” is often needed to clear floats.
- Examples 1-3 clear floats by applying a CSS class to a p tag. The p tag holds a “non-breaking space” – ascii code for space is “ ”
- Examples 4 and 5 clear floats by applying the CSS clearfix class in a different manner. The clearfix is applied to a div tag that contains the floated items.
No CSS Clearfix Applied Code
Below is an example without a CSS clearfix applied. Columns 1-3 (green, red, orange) are “floated” using CSS. A CSS clearfix is needed to fix the way the pink column is displayed. Green is Chartreuse. There is a div with a blue border around it to illustrate different clearfix methods. There are 5 CSS clearfix examples below.
<div style="border: 1px solid blue; padding: 5px;">
<div style="float: left; width: 33%; background: Chartreuse;">Column 1</div>
<div style="float: left; width: 33%; background: red;">Column 2 Column 2 Column 2</div>
<div style="float: left; width: 33%; background: orange;">Column 3 Column 3</div>
<div style="width: 50%; background: pink;">A CSS clearfix is needed to clear this correctly.</div>
</div>No CSS Clearfix Applied Result
CSS Clearfix Example 1 Code
<style type="text/css"><!--
.clearfix {
clear: both;
height:1px;
overflow:hidden;
margin-bottom:-1px;
line-height:1%;
font-size:0px;
}
--></style>
<div style="border: 1px solid blue; padding: 5px;">
<div style="float: left; width: 33%; background: Chartreuse;">Column 1</div>
<div style="float: left; width: 33%; background: red;">Column 2 Column 2 Column 2</div>
<div style="float: left; width: 33%; background: orange;">Column 3Column 3</div>
<div style="width: 50%; background: pink;">A CSS clearfix is needed to clear this correctly.</div>
<p class="clearfix"> </p>
</div>CSS Clearfix Example 1 Result
CSS Clearfix Example 2 Code
<style type="text/css"><!--
.clearfix {
clear: both;
height: 0;
font-size: 1px;
line-height: 0px;
display: block;
}
--></style>
<div style="border: 1px solid blue; padding: 5px;">
<div style="float: left; width: 33%; background: Chartreuse;">Column 1</div>
<div style="float: left; width: 33%; background: red;">Column 2 Column 2 Column 2</div>
<div style="float: left; width: 33%; background: orange;">Column 3 Column 3</div>
<div style="width: 50%; background: pink;">A CSS clearfix is needed to clear this correctly.</div>
<p class="clearfix"> </p>
</div>CSS Clearfix Example 2 Result
CSS Clearfix Example 3 Code
<style type="text/css"><!--
.clearfix {
clear: both;
font-size: 1px;
line-height: 0px;
height: 0px;
}
--></style>
<div style="border: 1px solid blue; padding: 5px;">
<div style="float: left; width: 33%; ;background: Chartreuse;">Column 1</div>
<div style="float: left; width: 33%; background: red;">Column 2 Column 2 Column 2</div>
<div style="float: left; width: 33%; background: orange;">Column 3 Column 3</div>
<div style="width: 50%; background: pink;">A CSS clearfix is needed to clear this correctly.</div>
<p class="clearfix"> </p>
</div>CSS Clearfix Example 3 Result
Thierry Koblentz – Nicolas Gallagher Clearfix Example Result – Example 4 Code
This is example 4. The CSS clearfix is applied differently here. It is applied to the div tag that contains the floated elements. After the div tag closes, it clears the float.
The next 2 methodologies apply the CSS clearfix in a different way. The CSS clearfix class is applied to the div with the blue border. It contains the first 3 columns. The div with the blue border will contain the floated divs that need a clearfix.
<style type="text/css"><!--
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
--></style>
<div class="clearfix" style="border: 1px solid blue; padding: 5px;"> <!-- CSS clearfix applied here. -->
<div style="float: left; width: 33%; ;background: Chartreuse;">Column 1</div>
<div style="float: left; width: 33%; background: red;">Column 2 Column 2 Column 2</div>
<div style="float: left; width: 33%; background: orange;">Column 3 Column 3</div>
<div style="width: 50%; background: pink;">A CSS clearfix is needed to clear this correctly.</div>
</div>Thierry Koblentz – Nicolas Gallagher Clearfix Example Result – Example 4 Result
CSS Clearfix Example 5 Code
<style type="text/css"><!--
.clearfix {
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
line-height: 0;
content: " ";
clear: both;
height: 0;
width: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
}
--></style>
<div class="clearfix" style="border: 1px solid blue; padding: 5px;"> <!-- CSS clearfix applied here. -->
<div style="float: left; width: 33%; background: Chartreuse;">Column 1</div>
<div style="float: left; width: 33%; background: red;">Column 2 Column 2 Column 2</div>
<div style="float: left; width: 33%; background: orange;">Column 3 Column 3</div>
<div style="width: 50%; background: pink;">A CSS clearfix is needed to clear this correctly.</div>
</div>CSS Clearfix Example 5 Result
