1.1为什么要清除浮动
image.png
由于父级盒子很多情况下，不方便给高度，但是滋贺子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
1.2清除浮动的本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身有高度，则不需要清除浮动
-清楚浮动之后，父级就会根据浮动的滋贺子自动检测高度。父级有了高度，就不会影响下面的标准流了。
1.3清除浮动
选择器{clear:属性值;}
| 参数值 | 说明 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
- 实际开发过程中，几乎只用clear:both
1.4清除浮动的方法
1、额外标签法也称为隔墙法，是W3C推荐的做法。
2、父级添加overflow属性
3、父级添加after伪元素
4、父级添加双伪元素
1.41额外标签法
额外标签法会在浮动元素末尾添加一个空的标签。
在最后一个浮动盒子的后面新建一个盒子如下用于堵住浮动的盒子。
.clear{
clear:both;
}
<div class="box">
<div class="left"></div>
<div class="right"></div>
<div class="clear"></div>
</div>
优点：通俗易懂，方便书写
缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素（如：span就不行）
1.42 父级添加overflow
可以给父级添加overflow，将其属性值设置为hidden、auto或scroll。
优点：代码简洁
缺点：无法显示溢出部分
1.43 ：after伪元素法
:after方式是额外标签法的升级版，也是给父元素添加。在css中增加如下为元素，之后在父元素增加clearfix标签。
.clearfix:after{
content:"";
display:block;
height:0;
clear:both;
visibility:hidden;
}
/*IE6、7专有*/
.clearfix{
*zoom:1;
}
优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等
1.44：双伪元素清除浮动
也是给父元素添加
.clearfix:before,
.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.claerfix{
*zoom:1;
}
优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等
