<dexbol />

.fix{
    content:'.';
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
}

上面的代码是最常见的清除浮动的方法（在支持:after伪选择符的浏览器下），国内各大网站也都普遍使用此方法，但这里有一个缺陷：demo

通过demo可以看到最外层div#page底部与body有一个空隙，但这里的确什么内容也没有。把清除浮动类的visiblity属性删除后发现原来是content属性指定的点号。造成这个现象的原因是：上面的css规则并没有很好的隐藏掉content内容。

上面有两条rule是用来隐藏content属性指定的内容(这里是点号)：height:0 这样设置并不能隐藏元素，但超出的文本会自然溺出，不会影响到下面的文档流（类似position:absolute），然后用visibility:hidden把它隐藏掉，在大多数情况下这样就ok了。但是当溺出的文本下面没有文档流的时候，他就会像普通文本那样也占个位

解决办法很简单，既然是溺出的文本那加个font-size:0就搞定了，或者更严谨一些，如下面的yahoo.com里的清除浮动的css rule

ol:after, ul:after,
.md:after, .md-sub:after, .hd:after, .bd:after, .ft:after,
.fixfloat:after, .fbody:after,
#colcx:after, #rightcx:after, #eyebrow:after,
#masthead:after, #search:after, #tabs:after,
#doors:after, #patabs:after, #patop:after,
#trough-overlay-bd div:after, #newsft:after, #newsbottom:after{
    content:".";
    display:block;
    font-size:0px;
    line-height:0px;
    height:0;
    clear:both;
    visibility:hidden;
}

这是我发现的唯一一个在清除浮动的样式表里使用font-size:0的网站 ，yahoo 美国真不是盖的。

父元素haslayout=-1,若干子元素浮动,当最后一行子元素的总宽度及单个子元素的(width + border + margin + padding)乘以最后一行的元素个数小于父元素宽度
(设置或继承)加2px时,最后一行子元素margin-bottom被忽略。

用一个简单的表达式表示：

var SEOW=单个子元素的整体宽度(margin+padding+border+width);
var PEW=父元素的宽度(width, 设置或继承);
var N=最后一行子元素的个数;
if(SEOW*N<PEW+2){
  //最后一行子元素margin-bottom被忽略。
}

Demo:

http://dexbol.com/demo/css/ignore-margin-ie6-bug.html(*Open It In IE 6*)