CSS清楚浮动的四种方式

1. 使用 clear:both; 清除浮动;
2. 给父级盒子添加 overflow:hidden,auto...等样式属性;
3. 使用 after伪元素清除浮动;
.clearfix:after{
    content: ".";
    clear:both;
    height: 0;
    visibility: hidden;
    display: block;
}
.clearfix{
    *zoom:1; /*   *表示只有IE 6 7的浏览器才会执行,  IE 6 7浏览器清楚浮动的方法是 zoom*/
}

4. 使用 before 和 after 双伪元素清除浮动;
.clearfix:before,.clearfix:after{
    content: ".";
    display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    *zoom:1; /*   *表示只有IE 6 7的浏览器才会执行,  IE 6 7浏览器清楚浮动的方法是 zoom*/
}
 

评论