Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
micro clearfix LESS mixin
/* Micro ClearFix Mixin */
.clearfix{
zoom:1;
&:before, &:after{ content:""; display:table; }
&:after{ clear: both; }
}
@geddski

This comment has been minimized.

Copy link
Owner Author

commented Apr 18, 2012

Cool thing is it lets you apply the clearfix from CSS rather than from HTML markup. Based on http://nicolasgallagher.com/micro-clearfix-hack/#comment-37459

@y0n3r

This comment has been minimized.

Copy link

commented Oct 7, 2013

You gotta be super careful using this as a mixin....it could bloat your code very quickly if you have a lot of elements that contain floats. It's safer to just invoke the class directly.

@ghost

This comment has been minimized.

Copy link

commented Aug 19, 2014

Funny you mention that y0nas, in the face of * selectors in our contemporary Bootstrap epidemic. Yes - for anyone that finds this by random chance, don't go overboard. Creating anonymous table structure on every single element isn't exactly smart or fast.

@krismeister

This comment has been minimized.

Copy link

commented Dec 28, 2014

This is an old post, but its still ranked on google.

.my-class{
   &:extend(.clearfix all);
}

Will lead to less bloat. It hoists the .my-class selector upto the .clearless declaration.

@carbontwelve

This comment has been minimized.

Copy link

commented Jun 25, 2016

@krismeister thank you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.