清除浮动方法
所谓浮动，就是指盒子脱离标准流。
浮动的性质：脱标、贴边、字围、收缩。
清除方法1
加高法（不推荐）
浮动的元素，只能被有高度的盒子关住。 也就是说，如果盒子内部有浮动，这个盒子有高，那么妥妥的，浮动不会互相影响。但是，工作上，我们绝对不会给所有的盒子加高度，这是因为麻烦，并且不能适应页面的快速变化。
1 <div> → 设置height
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
6
7 <div> → 设置height
8 <p></p>
9 <p></p>
10 <p></p>
11 </div>
法2：clear both
clear both 清除浮动，清除左右浮动影响（不推荐使用）
最简单的清除浮动的方法，就是给盒子增加clear:both；表示自己的内部元素，不受其他盒子的影响。
缺点：浮动确实被清除了，不会互相影响了。但是有一个问题，就是添加clear:both的盒子margin失效。*两个div之间，没有任何的间隙了。
1 <div>
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
6
7 <div> → clear:both;
8 <p></p>
9 <p></p>
10 <p></p>
11 </div>
内墙法
在最后一个浮动标签后面新加一个标签，样式clear both
内墙法的优点就是，不仅仅能够让后部分的p不去追前部分的p了，并且能把第一个div撑出高度。这样，这个div的背景、边框就能够根据p的高度来撑开了
缺点：添加无意义标签，语义化差
1 <div>
2 <p></p>
3 <p></p>
4 <p></p>
// 墙
5 <div class="cl h10"></div>
6 </div>
7
8 <div>
9 <p></p>
10 <p></p>
11 <p></p>
12 </div>
外墙法
在两部分浮动元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追前面的浮动元素。
墙用自己的身体当做了间隙。
缺点：添加无意义标签，语义化差,父亲没有高度
1 <div>
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
6 // 墙
7 <div class="cl h10"></div>
8
9 <div>
10 <p></p>
11 <p></p>
12 <p></p>
13 </div>
法3：触发BFC
BFC（块级格式化上下文）
- 计算BFC的高度时，会检测浮动或者定位的盒子高度。
- BFC区域内的盒子不管怎么花里胡哨，都不会影响外面的盒子
哪些元素会具有BFC的条件
不是所有的元素模式都能产生BFC，w3c 规范：
display 属性为 block, list-item, table 的元素，才会产生BFC.
怎么样才能触发BFC?
display属性为inline-block,table-cell, table-caption, flex, inline-flex
float属性不为none
position定位为：absolute,fixed
overflow属性不为vsible
常用的是:overflow:hidden ,定位position
父亲加overflow，触发bfc，缺点是内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素.
1 <div> → 设置overflow:hidden
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
9 <div> → 设置overflow:hidden
10 <p></p>
11 <p></p>
12 <p></p>
13 </div>
法4：伪元素清除
1.使用after伪元素清除浮动（推荐使用）
.clearfix::after {
content: ".";
display: block;//使生成的元素以块级元素显示,占满剩余空间
clear: both;//清除左右浮动
height: 0;// 高度为零，避免影响原来布局
visibility: hidden;// 内容不可见，但是保留位置
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
1 <div class="clearfix"> → 添加清除浮动类
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
9 <div class="clearfix"> → 添加清除浮动类
10 <p></p>
11 <p></p>
12 <p></p>
13 </div>
2.使用before和after双伪元素清除浮动（推荐，我比较喜欢用这个）
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
.clearfix{
*zoom: 1;
}
1 <div class="clearfix"> → 添加清除浮动类
2 <p></p>
3 <p></p>
4 <p></p>
5 </div>
9 <div class="clearfix"> → 添加清除浮动类
10 <p></p>
11 <p></p>
12 <p></p>
13 </div>