Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

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.
  • Loading branch information...
commit b628f8b3d00a7986d991bb07a9268839dde93abb 1 parent 7cdc7f0
@Snugug authored
View
53 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
Please sign in to comment.
Something went wrong with that request. Please try again.