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.

Have Your Say

  1. Werbeagentur

    January 30th 2008

    I tryed in in CSS and works for me very well.

  2. Werbeagentur

    March 5th 2009

    Well, i tryed it too but it wont work in IE. Did i do something wrong?

  3. Hochzeitsfotograf

    March 5th 2009

    @werbeagentur: maybe i can help you. I just dropped you an email.

  4. 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.

  5. 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

  6. 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.

  7. 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 ;-)

  8. 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. =)

  9. 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

  10. 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”.

  11. 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

  12. 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.

  13. 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 : )

  14. earph

    May 11th 2009

    This method is not working for me in Firefox.

  15. 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.

  16. 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!

  17. 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.

  18. Dan

    July 2nd 2009

    @Aleks: How do you clear floated elements?

  19. 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.

  20. Mike

    August 7th 2009

    Thanks! it works :-)

  21. 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.

  22. 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

  23. Druckertinte

    January 30th 2010

    It works great! Thanks for share this article, usefully and interesting for me.
    Many Regards from Germany

    • Your Comment:

      Live preview is on. (turn it off)
    • Leave your comment below (some html is allowed).

ClearFix is out! We're moving on

February 2010

S M T W T F S
  1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28