Read more

Micro clearfix mixin for Sass

Henning Koch
October 25, 2011Software engineer at makandra GmbH

Clearfix Show archive.org snapshot is a hack to clear floating elements without additional HTML markup.

Illustration web development

Do you need DevOps-experts?

Your development team has a full backlog? No time for infrastructure architecture? Our DevOps team is ready to support you!

  • We build reliable cloud solutions with Infrastructure as code
  • We are experts in security, Linux and databases
  • We support your dev team to perform
Read more Show archive.org snapshot

If you only need to support IE8 and above, a great clearfix with few side effects is:

=clearfix
  &:after
    content: ""
    display: block
    clear: both

This is a Sass mixin.

Issues clearing with display: table

You will find many clearfix solutions that clear with display: table instead:

=clearfix
  &:after
    content: ""
    display: table
    clear: both

The problem with this solution is that they prevent collapsing margins from non-floating children of the cleared container.

See this Codepen Show archive.org snapshot for a visualization of the differences between display: block and display: table.

See this article Show archive.org snapshot for more discussion.

Issues with Compass-provided clearfix

Compass also gives you a mixin from compass/utilities/general/clearfix, but that adds overflow: hidden to your container.

overflow: hidden is annoying since it prevents margins from collapsing. It also hides your overflow (duh!), cutting off box shadows from child elements.

The future

We might eventually get a standards clearfix with display: flow-root Show archive.org snapshot .

Posted by Henning Koch to makandra dev (2011-10-25 12:18)