清除浮动的知识总结

为什么要清除浮动

有时候为了方便，父元素不设置高度，而子盒子又是浮动的，这样如果不清除浮动，就会影响后面的布局。

清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

清除浮动的方法

额外标签法（隔墙法）

格式：选择器{clear: 属性值; }

属性值	描述
left	清除左侧浮动的影响
right	清楚右侧浮动的影响
both	同时清除左右两侧浮动的影响

其中：clear: both; 较为常用。

优点：通俗易懂，书写方便；
缺点：添加许多无意义的标签，结构化较差；

父级：overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden 、auto或scroll；
其中：overflow: hidden; 较为常用。

优点：代码简洁；
缺点：无法显示溢出的部分；

父级：after 伪元素

:after 方式是额外标签法的升级版，是在 css 文件中写入一个类，再给需要清除浮动的父元素添加这个类：

.clearfix:after {
    
    
    content:"";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}

/* IE6、7专有 */
.clearfix {
    
    
    *zoom: 1;
}

优点：没有增加标签，结构更简单；
缺点：需要照顾低版本浏览器；

父级：双伪元素

和伪元素法的原理相同，额外加了一个 before 方法：

.clearfix:before, .clearfix:after {
    
    
    content:"";
    display: table;
}

.clearfix:after {
    
    
    clear: both;
}

/* IE6、7专有 */
.clearfix {
    
    
    *zoom: 1;
}

优点：代码更简洁；
缺点：需要照顾低版本浏览器；