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:
=clearfix &:after content: "" display: block clear: both
This is a Sass mixin.
You will find many clearfix solutions that clear with
display: table instead:
=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.
display: block and
Seefor more discussion.
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.
We might eventually get a standards clearfix with.