清除浮动的方式
1.额外标签法
可以在需要清除浮动的元素后面加上一个块级标签,然后设置clear:both清除浮动
缺点:会新增许多无意义的标签,增加代码冗余度
2.overflow:hidden
给需要清除浮动元素加该属性
缺点:溢出部分无法隐藏
3.伪元素法
给需要清除浮动的元素加clearfix类名(随意设置),然后给其伪元素设置样式
.clearfix::after{
display:block
content:"",
height:0,
clear:both,
visibility:hidden
},
.clearfix{
*zoom:1
}
或
.clearfix::before,clearfix::after{
display:table,
content:""
},
.clearfix::after{
clear:both
},
//适配低版本浏览器
.clearfix{
*zoom:1
}