以下内容仅供参考
一、清除浮动
1.清除浮动的本质是为了清除父级元素因为子级元素浮动造成高度为0的问题。
2. 解决方式通常有五种
① 给父元素指定一个固定的高:但是通常不会给父元素固定高度,而是让子元素的内容把盒子自动撑开
② 额外标签法:在浮动元素的末尾添加一个空标签,比如<div style="clear:both">,或换成br亦可,但是会添加很多无意义的标 签
③ 父级标签添加overflow:hidden,auto,scroll触发BFC,但是可能会隐藏到需要的内容
④ 使用after伪元素清除浮动:给父元素添加一个伪类clearfix
.clearfix:after{
content:" ." ; // 内容小点,尽量加不要空,防止旧浏览器有空隙
display:bolck;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{
*zoom:1; // 兼容ie低版本浏览器
}
⑤ 使用before和after双伪元素清除浮动: 给父元素添加伪类clearfix,内容:
.clearfix:before, .clearfix:after{
content:" .";
display:table;
}
.clearfix:after{
clear:both;
}
.clearfix{
*zoom:1;
}