Clearfix

.clearfix clears child floats from within a container by generating a ::after pseudo-element. Apply it as a class or include it as a Sass mixin.

<div class="clearfix">...</div>

The clearfix mixin can be included directly in custom selectors:

.element {
  @include clearfix;
}

Without .clearfix, the container collapses around the floated buttons.

<div class="bg-info clearfix">
  <button type="button" class="button secondary float-start">Example Button floated left</button>
  <button type="button" class="button secondary float-end">Example Button floated right</button>
</div>

CSS

The Clearfix helper can be customized through Sass variables at compile time.

.clearfix {
  @include clearfix();
}

Sass mixin

The clearfix mixin generates the float-clearing ::after rule, usable in any custom selector without adding the class to markup.

/// Clear floats by adding a `::after` pseudo-element.
@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}