Compass Clearfix

A clearfix will extend the bottom of the element to enclose any floated elements it contains.

This file can be imported using: @import "compass/utilities/general/clearfix"

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

  1. Hacks – Mixins for hacking specific browsers.

Mixins

View Source: Sass | SCSS 

=clearfix
  overflow: hidden
  +has-layout

@mixin clearfix {
  overflow: hidden;
  @include has-layout; }

This basic method is preferred for the usual case, when positioned content will not show outside the bounds of the container.

Recommendations include using this in conjunction with a width. Credit: quirksmode.org

View Source: Sass | SCSS 

=pie-clearfix
  &:after
    content: "\0020"
    display: block
    height: 0
    clear: both
    overflow: hidden
    visibility: hidden
  +has-layout

@mixin pie-clearfix {
  &:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden; }
  @include has-layout; }

This older method from Position Is Everything called Easy Clearing has the advantage of allowing positioned elements to hang outside the bounds of the container at the expense of more tricky CSS.