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

Use in HTML:

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

The mixin source code:

{ { < scss-docs name="clearfix" file="scss/mixins/_clearfix.scss" }}

Use the mixin in SCSS:

.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.

{ {< example >} }

{ {< /example >} }