Skip to content

Loading…

Adding Micro Clearfix #386

Merged
merged 1 commit into from

4 participants

@DavidOliver

Thought this could be used at some point as it uses less CSS than the PIE clearfix and it seems robust, covering all main browsers. Have put credit in scss. http://nicolasgallagher.com/micro-clearfix-hack/
By the way, this is my first ever fork/pull request. :-)

@chriseppstein
Compass member

I'm currently pondering whether we should just cut over pie-clearfix to this and change the current pie-clearfix to legacy-pie-clearfix.

I like to keep compass users up to date without them having to do much work.

Also this needs a test case.

@DavidOliver
@chriseppstein
Compass member

@ericam, @imathis Thoughts?

@mirisuzanne
Compass member

I like moving to the micro approach in general, and leaving FF < 3.5 to a legacy mixin.

I don't like the use of the :before element. The only reason for including it is to prevent top-margin collapsing, which is outside the scope of a clearfix, and belongs somewhere else if people want it. I use the :before and :after pseudo-elements enough for other purposes that I don't like them being used up when they don't need to be.

@chriseppstein chriseppstein merged commit cb6068c into Compass:master
@chrisjlee

Why was this closed? This seems better than the current @clearfix mixin.

@Snugug Snugug referenced this pull request
Closed

Snugug clearfix #1485

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Showing with 13 additions and 0 deletions.
  1. +13 −0 frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss
View
13 frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss
@@ -29,3 +29,16 @@
}
@include has-layout;
}
+
+// An update to the PIE clearfix method that reduces the amount of CSS required
+// [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/) (25 April 2011)
+@mixin micro-clearfix {
+ &:before, &:after {
+ content: "";
+ display: table;
+ }
+ &:after {
+ clear: both;
+ }
+ @include has-layout;
+}
Something went wrong with that request. Please try again.