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.
