Posted over 10 years ago. Visible to the public.

Micro clearfix mixin for Sass

Clearfix Archive is a hack to clear floating elements without additional HTML markup.

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

Copy
=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:

Copy
=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 Archive for a visualization of the differences between display: block and display: table.

See this article Archive 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 Archive .

Your development team has a full backlog of feature requests, chores and refactoring coupled with deadlines? We are familiar with that. With our "DevOps as a Service" offering, we support developer teams with infrastructure and operations expertise.

Owner of this card:

Avatar
Henning Koch
Last edit:
over 3 years ago
by Besprechungs-PC
About this deck:
We are makandra and do test-driven, agile Ruby on Rails software development.
License for source code
Posted by Henning Koch to makandra dev
This website uses short-lived cookies to improve usability.
Accept or learn more