I’ve been using clearfix to clear floats for years now, and I always knew that it left a little bit of space after the HTML container that is was applied to. Most of the time I sort of worked around it, but I was curious whether there was a better solution.
Turns out, there is.
The problem is actually with the content
of .clearfix:after
:
1 2 3 4 5 6 7 8 | .clearfix:after { content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } |
.clearfix:after { content: '.'; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
The period is appended and hence there is a bit of a padding. The way to work around that is to simply change the period into a space, which isn’t rendered by the browser, and hence there’s nothing added to the end of your HTML container.
The complete clearfix then looks like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .clearfix:after { content: ' '; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; } |
.clearfix:after { content: ' '; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .clearfix { display: inline-block; } html[xmlns] .clearfix { display: block; } * html .clearfix { height: 1%; }
This solution worked beautifully.