//////////////////////////////
// Legacy Clearfix
//
// For when you need full Legacy support, including old IE and old Firefox
//
// From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
//////////////////////////////
%clearfix-legacy {
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;

  &:before,
  &:after {
    content: ".";
    display: block;
    height: 0;
    overflow: hidden;
  }
  
  &:after {
    clear: both;
  }
}

//////////////////////////////
// Micro Clearfix
//
// For when you need old IE support, but not concerned with old Firefox
// From http://nicolasgallagher.com/better-float-containment-in-ie/
//////////////////////////////
%clearfix-micro {
  /* for IE 6/7 */
  *zoom: expression(this.runtimeStyle.zoom="1", this.appendChild(document.createElement("br")).style.cssText="clear:both;font:0/0 serif");
  /* non-JS fallback */
  *zoom: 1;

  &:before,
  &:after {
    content: "";
    display: table;
  }
  
  &:after {
    clear: both;
  }
}

//////////////////////////////
// Modern Clearfix
//
// Clearfix for modern browsers, especiall when using border-box
//
// From http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php
//////////////////////////////
%clearfix:after {
  content: "";
  display: table;
  clear: both;
}