The ClearFix hack was great — it was actually a life saver several years ago when cross-browser support and CSS never played nice. We wanted to be table-less and needed floats to control our multi-column layouts; but then there was the clearing issue and ClearFix was there to save us every time.
Now things are getting better and the push to have standards-based mark-up and valid CSS with little to no hacks or filters is growing. Everyday we are getting closer and closer to creating complex layouts that require no conditional comments, no hacks and no filters – and stay perfectly valid and semantic. In a continuing effort to move in that direction — we had to seek out an alternative to everyones favorite hack; ClearFix.
There are hundreds of blog posts on this topic, it seems to highly talked about. But, we needed a solution just right or us and using the overflow property wasn’t flexible enough and other solutions didn’t validate perfectly.
So, we found this and love it:
.clear {
display:inline-block;
}
.clear:after {
display:block;
visibility:hidden;
clear:both;
height:0;
content: ".";
}Note that “display:inline-block;” can essentially be anything that triggers hasLayout in Internet Explorer (thank you Mr. Jason Garber for that tip).
It is nothing ground-breaking and nothing we invented … just a tip for those out there frustrated with the ClearFix hack and its many complications as well as for those looking for a cleaner more pure solution.
Note: this is admittedly very very close to the original ClearFix hack — it just slightly lighter and cleaner.
Werbeagentur
January 30th 2008
I tryed in in CSS and works for me very well.
Werbeagentur
March 5th 2009
Well, i tryed it too but it wont work in IE. Did i do something wrong?
Hochzeitsfotograf
March 5th 2009
@werbeagentur: maybe i can help you. I just dropped you an email.
Martin Ringlein
March 5th 2009
Let me know what sort of issues you are having specifically. We are sort of debating this post internally now, theoretically it shouldn’t work in IE6, but I am the master of coding for IE6 and this is what I’ve been using since this post was originally published and it works perfectly fine for me. I did do some extensive research and asking around beforehand (and this before the IE6 Death March started).
Let me know, would love to know how it isn’t working for you. Any code you send let us view would be great.
kelvin
March 9th 2009
Let’s say i have 4 containers in total, with 2 floating containers in the lowest (smallest/deepest) level.
So it’s a container containing a wrapper which have 2 small floating containers in it. (i had to explain it this way)
I can’t seem to make the wrapper expand automatically when the floating containers expand. I’ve tried clearfix so far, adding them to both the main container and the wrapper div. Please advice
Martin Ringlein
March 9th 2009
Kelvin,
Check out http://tinyurl.com/bm65v7—is that what you are tying to do? And you just want the subcontainer to be as tall as the tallest of the two floats?
Just using a simple clearfix on the subcontainer should do it, check out what I did in the example and let me know if that covers it.
Werbeagentur
March 9th 2009
Hi Martin, sorry for answering this late. After checking the page everything was fine with your script. The Problem was dreamweaver on my mac. After opening/loading a webpage everything becomes very very slow - i dont know why but i found out that this is a mac/dreamweaver issue. So when i code sometimes it “drops” chars so that was the problem. (i hope you understand my bad english).
thank you ;-)
kelvin
March 10th 2009
Martin,
Yes, that was what I meant. In my case the light blue “wrapper” did not expand when the chunk of text on the left got longer.
After going through a lot of sites, I found an easy way to handle float overflows using the overflow:auto pseudo-class. You can refer here.
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
One thing i realized is that you MUST define the width of the inner floats with % in order for that to work.
As for your Clearfix solution, thanks a lot!. I suppose it works as well. =)
Manu
March 24th 2009
The clearFix doesn’t work with the margin: 0 auto; centering solution.
I always work with containers 990pxs wide; margin: 0 auto; and, if I apply clearFix, the container looses its margin: auto feature because of the inline-block property.
Using an element with clear: both; it’s cleaner (in my opinion) and doens’t conflict with other solutions applied in projects.
What do you guys think?
[s]!
Manu
Martin Ringlein
March 24th 2009
Manu,
You are right actually. I’ve had this similar problem and it wasn’t until recently (very recently) that I realized the issue was with the display:inline; on the .clear. Dan is actually working on a follow-up post to this one (since it’s been over a year) with our newer new and improved “clear fix”.
Henry Lang
April 8th 2009
Didn’t work.
Any big problem with posting a simple but COMPLETE sample which depicts your invention in actual use?
Hank
Martin Ringlein
April 8th 2009
I wouldn’t call it an “invention”, but this website uses it and I believe Mixx.com is using it as well (via Jason Garber)—they use a different hasLayout trigger, but it works the same.
lijn
May 8th 2009
the issue about the margins that get lost, seems a IE8 problem, no? i tried to reconstruct the situation and i see a problem in IE8 (considering that i did my research with the display:inline-block in a specific css for IE because for safari and ff this extra css is not needed). attribute zoom (in a specific stylesheet for IE) is a solution for the problem, but this is a “i-don’t-to-use-this-manner” : )
when do we get to see the follow-up from Dan? i am curious : )
earph
May 11th 2009
This method is not working for me in Firefox.
Martin Ringlein
May 11th 2009
What version of Firefox are you using? It shouldn’t actually matter, just curious—can you provide a URL to what you are working on? We’ve been using this method for a while now and continually test it across browsers.
earph
May 11th 2009
Actually, I was applying the “clear” in the wrong location. I’ve got it working now. You can remove my previous post since is was “user error” heh!
Thanks!
aleks
June 29th 2009
This clearfix hack is sloppy and unnecessary. I’ve been professionally building websites since 1998 and I’ve never once encountered a situation that required it. My sincere suggestion is to dig deeper into standards-compliant CSS. Sometimes hacks provide the best solution, but in this case there is always a better solution that don’t break your validation.
Dan
July 2nd 2009
@Aleks: How do you clear floated elements?
Shelley
July 21st 2009
I am having problems with the clear:both on my website. I have tried using the following code and wrapping the clearfix div around the headerflash div but I couldn’t get it to work. The problem is with the flash banner on the website. In Firefox the banner fits neatly in below the top pictures. In IE8, it does not fit the whole way across. If you can help, I would be so grateful! Thanks.
Mike
August 7th 2009
Thanks! it works :-)
Stefan
November 20th 2009
CSS is really going to replace all known webprogramming technics. A must have for people who want to have good rankings too.
Alex Blubndell
January 19th 2010
@Manu, I know this is an old topic, but I have just had the same issue with losing my centered div with 0 auto margins.
I just changed display:inline-block to Display:block and all is now ok in the world!
Cheers
Alex
Druckertinte
January 30th 2010
It works great! Thanks for share this article, usefully and interesting for me.
Many Regards from Germany