The clearfix hack is a must have component in web development.

/* The clearfix hack */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

When styling with Sass, instead of inserting the clearfix class into the HTML element, i will create a mixin and include it in the selector whenever i need the clearfix.

// The clearfix mixin
@mixin clearfix {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

// Apply clearfix on .parent
.parent {
  @include clearfix;
}

Done =)