清除浮动的几种方式：块级化上下文 、clear：both
一、块级化上下文：
原理：
1.BFC 全称是块级排版上下文，用于对块级元素排版，默认情况下只有根元素（body)一个块级上下文，但是如果一个块级元素 设置了float:left，overflow:hidden或position:absolute样式，就会为这个块级元素生成一个独立的块圾上下文，就像在window全局作用域内，声明了一个function就会生成 一个独立的作用域一样，新开僻的BFC像是开僻了一个新的小宇宙，使这个块圾元素内部的排版完全独立隔绝。2.独立的块级上下文可以包裹浮动流，全部浮动子元素也不会引起容器高度塌陷，也就是说包含块会把浮动元素的高度也计算在内，所以不用清除浮动来撑起高度。
生成BFC的几种方式：
- 浮动 (元素的 float不为 none）
- 绝对定位元素 (元素的 position为 absolute 或 fixed)
- 行内块 inline-blocks (元素的 display: inline-block)
- 表格单元格 (元素的 display: table-cell，HTML表格单元格默认属性)
- 标题 (元素的 display: table-caption，HTML表格标题默认属性)
- overflow的值不为 visible的元素
- 弹性盒子 flex boxes (元素的 display: flex 或 inline-flex)
最常见的是使用overflow：hidden的方式使之生成BFC。但基本都不采用这种方式，因为会影响布局，会隐藏超出部分。
二、clear：both
1、添加冗余元素
<div class="a">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div style="clear:left;"></div> <!--冗余的子元素-->
</div>
原理：
当添加了最后一个冗余元素（未设置clear:both
）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both（clear属性介绍），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。
缺点：添加了冗余元素，也不推荐
2、伪元素：after
.fix::after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
推荐这种方式。
3、双伪元素
使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
伪元素改良版，简便但不严谨。
