1、标准写法
(在浮动的盒子后面再加一个盒子div,不写任何内容只加上清除浮动)
div{
clear:both;
}
缺点:不建议写-----因为每次都要添加一个空盒子
2、在父级的盒子上添加
div{
overflow:hidden; /*触发BFC*/
}
缺点:内容增多时候容易造成不自动换行导致内容被隐藏掉,无法显示需要溢出的内容
3、伪类实现清除浮动
其中的.clearfix的类名是自定义的,根据个人需要
.clearfix:after{
content: "."; /*内容随便写,写个小点*/
display:block; /*转换为块级元素*/
height:0; /*高度为0,避免上面小点内容撑开盒子*/
visibility:hidden; /*隐藏盒子*/
clear:both; /*清楚浮动*/
}
4、伪类升级版
其中的.clearfix的类名是自定义的,根据个人需要
.clearfix:before,.clearfix:after{
content:"";
display:table; /*触发BFC*/
}
.clearfix:after{
clear:both;
}
兼容IE6-7
.clearfix{*zoom:1;}
在我们工作中平时最长用是第四种伪类升级写法