Skip to main content
Figuration v3 Preview Available!
Utilities

Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.

Clearfix

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

<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;
}

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
Without .clearfix
    <!-- With .clearfix -->
    <div class="bg-info clearfix">
        <button class="btn float-left">Button floated left</button>
        <button class="btn float-right">Button floated right</button>
    </div>

    <!-- Without .clearfix -->
    <div class="bg-info">
        <button class="btn float-left">Button floated left</button>
        <button class="btn float-right">Button floated right</button>
    </div>