为什么要清除浮动?
因为父级盒子很多情况下,不方便给高度,但是子盒子浮动就不占有位置,最后父级盒子高度为0,这样的话,后面标准留的盒子就会跑到浮动的元素下面去,影响布局。
清除浮动的方法
- 额外标签法(隔墙法)
在浮动元素末尾添加一个空的标签例如<div style=”clear:both”></div>
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化较差
- 父级添加overflow属性
给父级添加: overflow为 hidden| auto| scroll 都可以实现.
优点:代码简洁;
缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉;
- 使用after伪元素
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1; /* IE6、7 专有 */
}
优点:符合闭合浮动思想 结构语义化正确;
缺点:由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。
- 使用双伪元素
.clearfix::before,
.clearfix::after {
content:"";
display:table;
}
.clearfix::after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点:相较于3,代码更简洁
缺点:由于IE6-7不支持:after,使用 zoom:1触发 hasLayout。