Updated clearfix #1151

Closed
wants to merge 4 commits into
from
View
1 frameworks/compass/stylesheets/compass/_support.scss
@@ -10,6 +10,7 @@ $legacy-support-for-ie7: $legacy-support-for-ie !default;
// Setting this to false will result in smaller output, but no support for legacy ie8 hacks
$legacy-support-for-ie8: $legacy-support-for-ie !default;
+
// @private
// The user can simply set $legacy-support-for-ie and 6, 7, and 8 will be set accordingly,
// But in case the user set each of those explicitly, we need to sync the value of
View
64 frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss
@@ -4,14 +4,62 @@
@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)
-@mixin clearfix {
- overflow: hidden;
- @include has-layout;
+// 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: false) {
+ // If you truly want the Overflow clearfix, you'd simply call @include clearfix(true) to get the old Compass clearfix.
+ @if $overflow {
+ overflow: hidden;
+ @include has-layout;
+ }
+ // If you prefer the much more comprehensive and intelligent variations on clearfix, you can have them.
+ @else {
+ // 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