Posted almost 8 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.

Once an application no longer requires constant development, it needs periodic maintenance for stable and secure operation. makandra offers monthly maintenance contracts that let you focus on your business while we make sure the lights stay on.

Owner of this card:

Avatar
Henning Koch
Last edit:
8 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