Clearfix
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*Works for IE > 8*/
.clearfix:after {
content: "";
display: table;
clear: both;
}
/*All this class is doing is adding a pseudo element*/
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
/*So instead of doing this we can simplify it using clearfix class*/
<div class="clearfix">
<div style="float: left;">Sidebar</div>
</div>