引 为什么要清除浮动？
元素浮动在网页开发中十分常见，但很多时候会发现，浮动的元素会影响其他元素的排列。这是因为浮动元素会脱离标准流，不再占据原来的位置，其后面的标准流元素会补上浮动元素空出来的位置，从而会影响其后面的标准流。
一 清除浮动的本质
先来看一下浮动会产生的影响：
所以，清除浮动的本质是清除浮动元素造成的影响，若父元素本身有高度，则不需要清除浮动。清除浮动后，父级就会根据浮动的自盒子自动检测高度，父级有了高度，就不会影响其后面的标准流了。
二 清除浮动的方法
清除浮动主要有四种方法：额外标签法、给父元素添加overflow属性、给父元素添加after伪元素、给父元素添加双伪元素
1. 额外标签法
额外标签法也称隔墙法 ，是W3C推荐的做法 。其原理在浮动元素末尾添加一个空标签(只能是块级元素)，对添加的空标签设置清除浮动样式clear:both/left/right，将浮动元素与后面标准流隔开，从而清除浮动对其后面标准流产生的影响。
- 优点：通俗易懂，书写方便。
- 缺点：但是添加无意义的标签会造成结构化相对较差
注：这个添加空元素只能是块级元素。
2. 给父元素添加overflow属性
给其父元素设置overflow:hidden/auto/scroll也可以实现清除浮动。该方法 代码简洁，但是会使溢出内容受到影响。
3. 给父元素添加after伪元素
该方法是额外标签法的升级，给其父元素增加clearfix类。百度、淘宝网、网易官网均使用了该方法
.clearfix::after {
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/*兼容IE6、7 */
.clearfix {
*zoom: 1;
}
- 优点：额外标签法的升级 ，没有增加标签，结构更简单
- 缺点：有兼容性问题，需要照顾低版本浏览器
4. 给父元素添加after伪元素
该方法是通过给浮动元素开头与末尾均增加一个伪元素，将浮动元素限定在一个区域内，从而清除浮动对标准流造成的影响。
.clearfix::before,.clearfix::after {
content: '';
display: table;
}
/*兼容IE6、7 */
.clearfix {
*zoom: 1;
}
该方法代码相对更加简洁，存在有兼容性问题。小米、腾讯官网都使用了该方法。
总结
- 清除浮动的本质是清除浮动元素造成的影响，父元素有了高度便无需清除浮动。
- 清除浮动主要有额外标法、父元素添加overflow属性、伪元素、双伪元素4种方法。