Mind The Gap; clearfix is clearly broken
Are you having trouble with a small gap at the bottom of your website? About five pixels or so that you just can’t seem to get rid of. Who uses “clearfix”? Many of us do — perhaps many of us have become overly dependent on it. Well, if you’ve got this unwanted spacing gap at the bottom of your design; it might be because your using the “clearfix” CSS hack.
It happens most often (or is most noticeable) when you’ve got a design that wants to go flush to the bottom of the browser. However, for some damn reason, it just won’t go flush — it is that pesky five or so pixels that just won’t budge. Playing with the padding and margins don’t help — what could it be? Check the containing element and see if you’ve applied the clearfix css hack to it … because if you did, our money is that is your problem.
There are many variations of clearfix floating around the web, but the most common one looks a little something like this:
.clearfix:after { content: “.”; display:block; height:0; clear:both; visibility:hidden; }
.clearfix {display: inline-table;}
.clearfix {height: 1%;}
Notice that “.” craziness going within the “.clearfix:after” property? That is your problem; that period is what is adding the little bit of space causing that unwanted gap. Don’t believe us … remove the clearfix hack from that containing element and watch your spacing gap issues disappear. It’s like magic.
“clearfix” was a life-saver and a god-send back before IE7 and back when we were all somewhat CSS novices. However, many have become overly dependent on the hack and hacks like it — most probably don’t even waste the time to understand how they work or what they actually do. That probably explains the common frustrations like unexplainable spacing gaps.
Creative solutions to browser flaws are great — just use them responsibly and try to understand the solution; how it works and what it really does!
Posted by Martin Ringlein on November 28, 2007 | Permanent Link |
I find I’m using clearfix less and less and less. The best method for clearing contained floats has been to float the container (can get tricky in fluid layouts, I presume)
The Blueprint CSS framework uses clearfix a fair bit, so it will be interesting if that sort of question starts cropping up on the CSS forums.
Well spotted, anyway! :)
If you want to get rid of all the .clearfix classes in your markup, you might want to try the ‘with:100% & overflow auto trick’. Read more about it here: http://www.quirksmode.org/css/clearing.html
@Colin – We are finding ourselves using the clearfix hack less and less as well. There is still a need for clearing floated elements properly, but clearfix is wonderful but does come with its problems (obviously). I’ve seen some code where the developer put clearfix on every div — I assume they were thinking “what can it hurt”; it can hurt and is just ugly too!
@Matthew – CSS Blueprint is interesting, but I’ve got my own issues with a CSS framework like that (for another post). I do think they do some things incorrectly and clearfix is one of those issues. Again, many people are using things like blueprint and clearfix without actually looking under the hood to see what they do or how they work — and then they hit and fload the forums when it breaks. Also — I have to give credit to John Riviello for spotting this issue.
@nuzzaci – thanks for the link, I’ll have to check it out … not sure if I’ve ever used that trick or not (or something similar to its intention).
I’ve been using overflow: hidden; + width for years.
The only obvious issue to be aware of with this technique (and overflow: auto;) is that you can’t shift elements out of that particular container (think absolute positioning or negative margins).
Egor, great point — thanks.
HTML Dog has a pretty good summary of the CSS Overflow property: <a href=“http://www.htmldog.com/reference/cssproperties/overflow/”>CSS Property: overflow</a>.
Maybe you’re just using the wrong clearfix?
The correct one that hasn’t caused me a lot of problems in months and months of developing websites is:
<code>.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden;
}</code>
for all browsers.
<code>.clearfix { display: inline-block; }</code>
for IE6.
<code>.clearfix { height: 1%; }</code>
for IE7.
I’ve seen this issue before, and never took the time to really investigate the cause. I had totally forgot clearfix was included in my mini css reset, and was using it purely out of habit! Thanks for reminding me, and to nuzzaci for the link.
South Creative, your comment is exactly what prompted the post. The more and more CSS frameworks that are coming out — the more and more front-end developers are caring less and less what they are working with.
I too forget sometimes I am using something like Clearfix — and I was overusing it a bit much in the past.
To be candid, this post isn’t a “we know all” sort of post. The topic came up because we saw the issue come up like three times a few months ago and we were doing some tricky hackery to get around it (like applying the containing background to the body instead) … we knew it wasn’t right and had to fix this issue finally. So, John Riviello actually figured out what was happening after some investigation.