CSS Tip: A Better Clearfix with Sass

The CSS clearfix has been a must-have in our web design toolkit for quite some time and, until new layout features like flexbox become more stable, we’ll always need some form of clearfix in float based layouts. There are several ways we can clear floats with native CSS, but each requires repeating either a class in the markup or the same properties and values throughout the CSS.

Thankfully, Sass has our back with alternative clearing methods that save us time and many lines of code. In this article, we’ll target the most efficient approach to clearing floats with Sass.

Clearfix Nesting

Nesting seems like a convenient method for clearing floats because we can simply nest the clearfix wherever necessary and refer to the parent selector.

.wrap {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

While nesting is a handy Sass feature and it gets the job done, it’s not entirely efficient for clearing floats because it isn’t reusable or modular. We’ll need to nest the clearfix inside every rule that requires it, which may result in excessive CSS output. So there is a cost in code size and maintainability.

Using a Mixin

A different approach is to create a mixin for the clearfix:

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

Then include it wherever necessary:

.wrap {
  ...
  @include clearfix;
}

My issue with this approach is that everywhere @include is used the entire block of code is repeated in the output, so it produces extra CSS.

Extending It

On a large-scale project, it’s best to use the @extend directive instead of a mixin, as it will output less CSS.

First we nest the clearfix inside a class selector:

.clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

We can then extend the .clearfix class wherever necessary.

.wrap {
  ...
  @extend .clearfix;
}
.main-header {
  ...
  @extend .clearfix;
}

@extend will output one CSS rule that groups the selectors with .clearfix.

.clearfix,
.wrap,
.main-header {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

Using a Placeholder Selector

We can still improve things by creating a placeholder––or silent class––selector. This way nothing gets compiled to CSS unless we actually use it.

Placeholder selectors are defined by a %, so we’ll need to replace the class with:

%clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

Now we can extend it anywhere without repeating any CSS.

.wrap {
  ...
  @extend %clearfix;
}
.main-header {
  ...
  @extend %clearfix;
}

Conclusion

Using the @extend directive is more efficient and maintainable, which should always be our goal when writing CSS. Even though we should be minifying and Gzipping CSS in production, and the difference in file size and performance is hardly––if at all––noticeable, this approach just feels better overall.

Is there another clearfix method you use? Let us know in the comments below.