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.