清除浮动的方法

---

一、为什么需要清除浮动?

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

二、清除浮动的本质

1. 清除浮动的本质是清除浮动元素造成的影响
2. 如果父盒子本身有高度，则不需要清除浮动
3. 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了
   清除浮动:选择器{clear:属性值;}

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

三.清除浮动的方法

1.额外标签法

额外标签法也称为隔墙法，是 W3C 推荐的做法。
额外标签法会在浮动元素末尾添加一个空的标签。例如 <div style=”clear:both”></div>，或者其他标签
（如
等）。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差
注意： 要求这个新的空标签必须是块级元素。

2.父级添加overflow

可以给父级添加 overflow 属性，将其属性值设置为 hidden、 auto 或 scroll 。
子不教,父之过,注意是给父元素添加代码
优点：代码简洁
缺点：无法显示溢出的部分

3. :after 伪元素法

给父元素添加

.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix { /* IE6、7 专有 */
*zoom: 1;
}
优点：没有增加标签，结构更简单
缺点：IE6,7不支持 兼容性问题
代表网站： 百度、淘宝网、网易等

4.双伪元素清除浮动

给父元素添加

.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点：代码更简洁
缺点：IE6,7不支持 兼容性问题
代表网站：小米、腾讯等