.clearfix:after { content: "."; visibility: hidden; display: block; height: 0; clear: both;}
Normally you would need to do something as follows:
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
With clearfix, you only need to
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->