CSS clearfix – clear float automatically using ::after

A clearfix class is a way for an element to automatically clear left and right float on its child elements. This eliminates the need to add extra child element to clear float. This works by adding ::after pseudo element on container element which has floar clearing style clear:both.

Example – float left without clearing float

This example has no clear float on outer div’s child elements. This has caused some undesired effects.

<style type="text/css" media="screen">
.outer {
  background-color:lightblue;
  padding: 5px;
}
.left {
  background-color:lightgreen; width:50px; margin: 5px;
  float:left;
}
</style>

<div class="outer">
  <div class="left">First</div>
  <div class="left">Second div</div>
</div>
<div>footer div</div>
refresh

Example – float left and clearing float using extra child element

This example adds extra child div (with clear:both) inside outer div.

<style type="text/css" media="screen">
.outer {
  background-color:lightblue;
  padding: 5px;
}
.left {
  background-color:lightgreen; width:50px; margin: 5px;
  float:left;
}
</style>
<div class="outer">
  <div class="left">First</div>
  <div class="left">Second div</div>
  <div style="clear:both"></div>
</div>
<div>footer div</div>
refresh

Example – float left and clearing float using clearfix

This example is using clearfix hack. Here outer div has class=clearfix. Class clearfix has an ::after pseudo element which clears both left and right float. Note that if you need IE8 support, you may want to use :after instead of ::after.

<style type="text/css" media="screen">
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.outer {
  background-color:lightblue;
  padding: 5px;
}
.left {
  background-color:lightgreen; width:50px; margin: 5px;
  float:left;
}
</style>
<div class="outer clearfix">
  <div class="left">First</div>
  <div class="left">Second div</div>
</div>
<div>footer div</div>
refresh

Share this article: share on Google+ share on facebook share on linkedin tweet this submit to reddit

Comments

Click here to write/view comments