Clearfix

Overview

Easily clear floats by adding .clearfix to the parent element. A detailed explanation of how the clearfix works is available.

Usage

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

Can also be used as a mixin.

// Mixin itself
@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}

// Usage as a mixin
.element {
  @include clearfix();
}

Example

The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout, as shown in the second part of the example.

<!-- With .clearfix -->
<div class="bg-info clearfix">
  <button type="button" class="btn float-start">Button floated to start</button>
  <button type="button" class="btn float-end">Button floated to end</button>
</div>

<!-- Without .clearfix -->
<div class="bg-info">
  <button type="button" class="btn float-start">Button floated to start</button>
  <button type="button" class="btn float-end">Button floated to end</button>
</div>

SASS Reference

Variables

The available Customization options, or Sass variables, that can be customized for this grouping of utility classes.

Mixins

Here are the mixins related to this grouping of utility classes that we use to help generate our CSS. You can also uses these mixins to generate your own custom components or utilities.

clearfix()

Apply a clearfix to an element.

@include clearfix();

clearfix-disable()

Disable the clearfix on an element.

@include clearfix-disable();