国庆之前的基础特别篇，来一波清除浮动的全家桶~~~


1、加高清浮动

1
拓展性不好

2、父级浮动（让元素它爸也浮动）

1
页面中所有元素都加浮动，margin左右自动失效（floats bad!）

3、inline-block清除浮动

1
margin左右auto失效

4、空标签清浮动

1
IE6最小高度19px（解决后IE6下还有2px偏差）

5、空br清浮动

1
不符合工作中：结构，样式，行为，三者分离的要求

6、after伪类，清除浮动方法（主流方法）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.clear:after{content:"";display:block;clear:both;}
.clear{zoom:1;}
1、after伪类：元素内部末尾添加内容；
:after{content"添加的内容";}IE6、7下不兼容
2、zoom缩放
a、触发IE下haslayout，使元素根据自身内容计算宽高。
b、FF不支持
c、BFC（block formatting context）标准浏览器
（1）float的值不为none，
（2）overflow的值不为visible，
（3）display的值为table-caption,inline-block中的任何一个,
（4）position的值不为relative和static，
（5）width|height|min-width|min-height:(!aotu)
d、haslayout IE浏览器
（1）writing-mode:tb-rl,
（2）-ms-writing-mode:tb-rl,
（3）zoom：(!normal)