hemtros
2/4/2017 - 4:48 AM

Clearfix

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>