Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
84 lines (75 sloc) 2.37 KB
// @doc off
// Extends the bottom of the element to enclose any floats it contains.
// @doc on
@import "hacks";
// 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 {
// 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
// [Easy Clearing](http://www.positioniseverything.net/easyclearing.html)
// has the advantage of allowing positioned elements to hang
// outside the bounds of the container at the expense of more tricky CSS.
@mixin legacy-pie-clearfix {
&:after {
content : "\0020";
display : block;
height : 0;
clear : both;
overflow : hidden;
visibility : hidden;
}
@include has-layout;
}
// This is an updated version of the PIE clearfix method that reduces the amount of CSS output.
// If you need to support Firefox before 3.5 you need to use `legacy-pie-clearfix` instead.
//
// Adapted from: [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/)
@mixin pie-clearfix {
&:after {
content: "";
display: table;
clear: both;
}
@include has-layout;
}
Something went wrong with that request. Please try again.