CSS Clearfix

CSS Clearfix

The most common problem associated with float in our layouts is the lost height on the container element that's grouping the floated items.

HTML

<div class="container clearfix">
  <div class="box purple"></div>
  <div class="box blue"></div>
</div>
<p>This paragraph should be below the two floated boxes</p>

CSS

/*
Properly calculates the height of the containing element with elements floated 
inside.
*/
.clearfix:after {
  content: "";
  display: table;
  clear: both;
}