Utilities - Clearfix

Use the clearfix utility to clear floated content within a container.

You can easily clear floats by adding the _clearfix helper class to the parent element.

In the following example, without adding the clearfix helper, the wrapping div would display the two buttons on separate lines, which would cause a broken layout.

<div class="_clearfix">
    <i-button class="_float:left">
        Floating Left Button
    </i-button>
    <i-button class="_float:right">
        Floating Right Button
    </i-button>
</div>

Sass Mixin

The clearfix utility is also available as a Sass Mixin.

@require '@inkline/inkline/css/mixins/clearfix'

.element {
  @include clearfix;
}