Posted over 7 years ago. Visible to the public.

Micro clearfix mixin for Sass

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

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

Growing Rails Applications in Practice
Check out our new e-book:
Learn to structure large Ruby on Rails codebases with the tools you already know and love.

Owner of this card:

Avatar
Henning Koch
Last edit:
3 months 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 cookies to improve usability and analyze traffic.
Accept or learn more