CSS 清除浮动的4种方法

1. 为什么要清除浮动

因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

2. 清除浮动的方法

（1）额外标签法

在浮动元素末尾添加一个空的标签例如：

<div style="clear:both"></div>

（2）父级添加overflow属性

可以给父级添加overflow属性为hidden或auto或scroll：

1.Father {
2   
3   
4    overflow: hidden;
5    /* overflow: auto; */
6    /* overflow: scroll; */
7}

（3）父级使用after伪元素

1.Father:after {
2   
3   
4    content: "";
5    display: block;
6    height: 0;
7    clear: both;
8    visibility: hidden;
9}
10
11/* IE6、7 专有 */
12.Father {
13   
14   
15    *zoom: 1;
16}

（4）父级使用双伪元素

1.Father:before,
2.Father:after {
3   
4   
5    content: "";
6    display: table;
7}
8
9.Father:after {
10   
11   
12    clear: both;
13}
14
15.Father {
16   
17   
18    *zoom: 1;
19}

3. 总结

清除浮动的方式

优点

缺点

额外标签法

通俗易懂，书写方便

添加许多无意义的标签，结构化较差

父级添加overflow属性

书写简单

溢出隐藏

父级使用after伪元素

结构语义化正确

由于IE6-7不支持:after，兼容性问题

父级使用双伪元素

结构语义化正确

由于IE6-7不支持:after，兼容性问题