Skip to main content

Clearfix

Easily clear floats by adding .clearfix to the parent element. Can also be used as a mixin.

Use the .clearfix class to clear floats. It uses the ::after pseudo-element to clear floats.

Float left Float right

The floats above are cleared by the .clearfix helper.

<div class="clearfix">
  <button class="btn btn-secondary float-start">Float left</button>
  <button class="btn btn-secondary float-end">Float right</button>
</div>

Mixins

In source Sass, use the clearfix() mixin:

@import "node_modules/boodoo/scss/mixins";

.my-component {
  @include clearfix();
}