Force an element to clear its floated child element and prevent its layout from collapsing.

Installation

Using npm:

npm i -S jigsass-utils-clearfix

Usage

Import JigSass Utils Clearfix into your main scss file near its very end, together with all other utilities (utilities should always be the last to be imported).

@import 'path/to/jigsass-utils-clearfix/scss/index';

Importing the file will not create any styles by itself. You would need to indicate that the .u-cf class should actually be generated in each component or object it is used in:

// _c.foo.scss
.foo {
  @include jigsass-util(u-cf);

  ...
}

// _c.bar.scss
.bar {
  @include jigsass-util(u-cf);

  ...
}

// _c.baz.scss
.baz {
  @include jigsass-util(u-cf);

  ...
}

Doing so helps us a great deal with portability, as no matter where we import component or object partials, the correct utility classes will be generated. Think of it as a poor man's dependency management.

Developer communication is also assisted by including "dependencies" wherever they are required, as anyone going through a partial, can easily understand how it should be marked up with just a glance.

As far as bloat goes, just don't worry about it - the actual styles will only be generated once, at the location in the cascade where the Jigsass Clearfix partial was imported into the main file:

// output.css
.u-cf:after {
  clear: both;
  content: '';
  display: block;
}

<div class='u-cf' style='background-color: #09a5d9;'>
  <div class="fpo">Cleared float</div>
</div>