micro clearfix LESS mixin

cf.less

/* Micro ClearFix Mixin */
.clearfix{
  zoom:1;
  &:before, &:after{ content:""; display:table; }
  &:after{ clear: both; }
}

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

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.

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.

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.

@krismeister thank you.