CSS Utility Classes Clearfix

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

You can easily clear floats by adding the clearfix utility 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.

• _clearfix

<template>
    <div class="_clearfix!">
        <IButton class="_float:left!"> Floating Left Button </IButton>
        <IButton class="_float:right!"> Floating Right Button </IButton>
    </div>
</template>

Sass Mixin

The clearfix utility is also available as a Sass Mixin.

@import '@inkline/inkline/css/mixins';

.element {
  @include clearfix;
}