清除浮动带来的影响
浮动造成父元素高度塌陷
清除浮动的方法
- 底部插入有
clear:both;
的元素 - 父元素BFC(IE8+)或haslayout(IE6/IE7)
清除浮动方法的差异
clear:both
- 与外界接触
- margin重叠
BFC/haslayout
- 封闭结构,内部声明不会对外部造成任何影响
clear通常应用形式
clear:both
- HTML block水平元素底部走起
<div ...></div>
- Css after 伪元素底部生成
.clearfix:after{}
两种形式的不足
- div元素--很多裸露的div标签
- after伪元素--不兼容IE6/IE7
BFC/haslayout通常声明
- float:left/right
- position:absolute/fixed
- overflow:hidden/scroll(IE7+)
- display:inline-block/table-cell(IE8+)
- width/height/zoom:1/...(IE6/IE7)
因BFC不能“一方通行”
权衡后的策略
// IE8+
.clearfix:after{
content:'';
display:block;
height:0;
overflow:hidden;
clear:both;
}
// IE6/IE7
.clearfix{
*zoom:1;
}
更好的方法
// IE8+
.clearfix:after{
content:'';
display:table;
clear:both;
}
// IE6/IE7
.clearfix{
*zoom:1;
}
.clearfix
只需要应用到包含浮动子元素的父元素上,切勿滥用