clearfix

Make an element adapt its height to fit floated children, and clear floats in both directions.

use-name: scut-clearfix
type: mixin and placeholder (same)

example

HTML

<div class="eg-clearfix-container">  <div class="eg-clearfix-floater">floated</div>
  <div class="eg-clearfix-floater">floated</div>
</div>

SCSS

.eg-clearfix-container {
  @include scut-clearfix;
  // or @extend %scut-clearfix;
  background: $eg-muted;
}
.eg-clearfix-floater {
  float: left;
  margin: 1em;
}

compiled CSS

.eg-clearfix-container {
  background: #CCCCCC;
}
.eg-clearfix-container:after {
  content: "";
  display: table;
  clear: both;
}

.eg-clearfix-floater {
  float: left;
  margin: 1em;
}

Result

floated