清除浮动的几种最佳方案

 

最常见的方式

---

 

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.clearfix {
    *+height: 1%;
}

 

 

经测试下面两种也可以达到效果

---

 

 

.clearfix {
    overflow: auto;
    _height: 1%
}

 

 

.clearfix {
    overflow: hidden;
    _zoom: 1;
}

 

我自己常用的方式

---

 

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1; /*IE/7/6*/

　　/*为了防止低版本的IE浏览器不支持after选择器或者某些属性,在最后加上zoom:1来清除浮动。*/

}