IE7 Compatible Float Clearing

According to the latest news at least. Includes font-size:0 per the original author of this mess.

.clearfix:after {
    content:".";
    display:block; 
    height:0;
    font-size:0;
    clear:both; 
    visibility:hidden;
}
.clearfix {display:inline-block;}  
/* \\*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* */

2 thoughts on “IE7 Compatible Float Clearing

  1. says:

    When I tried adding font-size:0; to the CSS it actually broke the clearing effect in Firefox. So I left it out. I’m not having a problem with an extra line in Firefox. It may help in some cases so test with and without its use.

  2. says:

    Clarification. I was using an older version of Firefox where including font-size:0; made the generated content cause a gap. Firefox 1.501 does not have this problem.

Leave a Reply