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"

Imports

Hacks – Mixins for hacking specific browsers.

Mixins

clearfix

=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

legacy-pie-clearfix

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

@mixin legacy-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.

view source

pie-clearfix

=pie-clearfix
  &:after
    content: ""
    display: table
    clear: both
  +has-layout

@mixin pie-clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
  @include has-layout;
}

This is an updated version of the PIE clearfix method that reduces the amount of CSS output. If you need to support Firefox before 3.5 you need to use legacy-pie-clearfix instead.

Adapted from: A new micro clearfix hack