Sass Clearfix Mixin

May 06, 2013

There are a few ways to implement the clearfix hack but the following Sass Mixin has been in my toolbox for the last year thanks to this article on Nicolas Gallaghers blog.

@mixin clearfix() {
    &:before,
    &:after {
        content: "";
        display: table;
    }
    &:after {
        clear: both;
    }
}

Usage:

.article {
     @include clearfix();
}
Join over 30,000 developers & designers who get the best news and articles delivered right to their inbox each week.