A17 SCSS Utilities

Description

A PIE method of clearing floats utility class and mixin.

Output

app.css

.float-clear::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  line-height: 0;
  overflow: hidden;
  visibility: hidden;
}

SCSS Usage

_component.scss

.columns {
  @include float-clear;
}

Demo

Content

document.html

<div>
  <div class="float-clear">
    <div style="float: left; margin-right: 20px;">float:left</div>
    <div style="float: left; margin-right: 20px;">float:left</div>
    <div style="float: left; margin-right: 20px;">float:left</div>
  </div>
  <p>Content</p><!-- paragraph isn't floating -->
</div>