1 // 清除浮动带来的影响;
2
3 // 方法一:元素后面添加clear:both;
4 // 1.HTML block水平元素底部
5 <div style="clear:both;"></div>
6 // 不足:造成很多裸露的<div>标签;
7
8 // 2.CSS after伪元素底部生成
9 .clearfix:after {}
10 // 不足:after伪元素属性,IE6/IE7不识别;
11
12 // 方法二:父元素BFC(IE8+)或haslayout(IE6/IE7);
13 float:left/right;
14 position:absolute/fixed;
15 overflow:hidden/scroll;(IE7)
16 display:inline-block/table-cell;(IE8+)
17 width/height/zoom:1;(IE6/IE7)
18
19 // 权衡之后的策略
20 .clearfix:after {content:""; display:block; height:0; overflow:hidden; clear:both;}
21 .clearfix {*zoom:1;}
22
23 // 更好的方法
24 .clearfix:after {content:""; display:table; clear:both;}
25 .clearfix {*zoom:1;}