清除浮动是一件功德无量的事情23333 这里记录一下清除浮动的多种方式
*首先要明确的是，为什么要清除浮动？
A 影响其他元素定位
父盒子高度为0，子盒子全部浮动、定位，子盒子不会撑开父盒子，下面的元素会到子盒子的下面
B 背景图片或颜色不能正常显示
由于浮动产生，如果对父级设置了CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
C margin padding设置受到影响
由于浮动导致父子盒子之间设置的padding margin不能正常表达，特别是上下的padding margin。
1 给父级盒子定义高度
原理：父级div手动定义高度，就决绝了父盒子无法自动获取到高度的问题，简单有效代码少
缺点：只适合高度固定的布局。
2 结尾处加上空div标签 clear:both
原理：在浮动元素的后面加上空div元素，利用css提供的clear:both清除浮动，让父盒子自动获取高度。
缺点：如果页面浮动较多，就要写n个空标签，会扰乱代码。
3 **最佳拍档** 使用伪类 父盒子:after 和 zoom
1 ????????.clearFlo:after{ 2 ????????????content: ‘‘; 3 ????????????height: 0; 4 ????????????display: block; 5 ????????????visibility: hidden; 6 ????????????line-height: 0; 7 ????????????clear: both; 8 ????????} 9 10 ????????.clearFlo{11 ????????????zoom: 1;12 ????????}原理：IE8+支持，:after原理和方法2有点类似，zoom是IE专有属性，可以解决6/7浮动问题，所以这是一个比较好的解决办法，推荐使用公共雷鸣，以减少css代码
4 父盒子定义overflow:hidden
缺点：超出盒子部分会被隐藏，不推荐使用。
5 双伪元素法
???????.clearfix:before, .clearfix:after{ ???????????content: ‘ ‘; ???????????display: table; ???????} ???????.clearfix:after{ ???????????clear: both; ???????} ???????.clearfix{ ???????????zoom: 1; ???????}原理：通过:after伪类在浮动元素后面加上display:table的不可见内容块，并给它设置clear:both来清除浮动。
总结：
第一种方法：简单，容易掌握，但只适合高度固定的布局，不推荐使用可以了解。
第二种方法：简单，浏览器支持好，但如果页面浮动布局多，就要增加很多空div，让人感觉很麻烦，不推荐使用，可以了解。
第三种方法：浏览器支持好,建议使用。
第五种方法：浏览器支持好,建议使用。
【CSS】清除浮动的五种方式
原文地址：https://www.cnblogs.com/code-klaus/p/9007509.html