A Better Clearfix mixin

The current clear fix mixin was out and out the Legacy clearfix. This mixin adapts depending on the amount of legacy support you need, and will write different clearfixes depending on the amount of support you need.
Compass · Jan 28, 2013 · b628f8b · b628f8b
1 parent 7cdc7f0
commit b628f8b
Showing 1 changed file with 46 additions and 7 deletions.
diff --git a/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss b/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss
@@ -4,14 +4,53 @@
 
 @import "hacks";
 
-// This basic method is preferred for the usual case, when positioned
-// content will not show outside the bounds of the container.
-//
-// Recommendations include using this in conjunction with a width.
-// Credit: [quirksmode.org](http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html)
+// And advanced clearfix mixin that will write the correct clearfix depending on what level of browser support you need.
+// Adapted from: [The very latest new new way to do "clearfix"](http://www.css-101.org/articles/clearfix/latest-new-clearfix-so-far.php) and [Better float containment in IE using CSS expressions](http://nicolasgallagher.com/better-float-containment-in-ie/)
 @mixin clearfix {
-  overflow: hidden;
-  @include has-layout;
+  // Legacy Clearfix
+  @if $legacy-support-for-ie6 and $legacy-support-for-ie7 and $legacy-support-for-mozilla {
+    /* 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
+  @else if $legacy-support-for-ie6 and $legacy-support-for-ie7 and not $legacy-support-for-mozilla {
+    /* 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
+  @else {
+    &:after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+  }
 }
 
 // This older method from Position Is Everything called