说起来呢，基本上只要你给容器div加了float的属性，就需要清除浮动来使页面显示正常，那么，到底有什么方法可以让浮动轻松清除呢？
可以用display：flex;替代，但是它对IE8，9支持不是很好，所以不怎么这么用。
1.在容器div的里面结束标记之前写如下这样的div这段代码：
<div style="clear:both"></div>
虽然通俗易懂，容易掌握，但是在页面中加入了一个无意义的空标签，违背了结构和表现分离的web标准的精髓，如果页面空标签多的话，对于后期的维护会造成一定的困难。一般来说，现在已经不采用这种方法。
2.在浮动容器div的css样式中加入overflow属性。
3.将父元素也变成浮动元素，但是影响整个页面的布局，不推荐使用。
4.使用:after伪元素，一般增加clearfix的class，大概写法如下：
.clearfix:after{
content:".";/*加一段内容*/
display:block;/*让生成的元素以块级元素显示，占满剩余空间*/
height:0;/*避免生成的内容破坏原有布局高度*/
clear:both;/*清除浮动*/
visibility:hidden;/*让生成的内容不可见*/
}
.clearfix{zoom:1;/*为IE6，7的兼容性设置*/}
除了clear:both;是为了清除浮动以外，其他的属性就是为了隐藏这个元素，所以我们对它进行了改进一下：
.clearfix:after,.clearfix:before{
content:".";/*加一段内容*/
display:table;/*创建匿名的表格单元，触发bfc*/
}
.clearfix:after{
clear:both;/*清除浮动*/
}
.clearfix{zoom:1;/*为IE6，7的兼容性设置*/}.clearfix:before，加上before，对清除浮动没什么作用，防止浏览器顶部空白崩溃，也就是说，margin-top和上一个盒子的margin-bottom它们会发生一个叠加，这么做就是防止叠加，其实没有这个需要，去掉before也没啥问题。
原理和第一种方法差不多，就是用clear:both;
使用的原理基本上就是触动bfc，
bfc：block formating contexts 块级格式化上下文
比如下面这些就是：
float：left;
overflow：auto;
display：table-cell;
display:table-caption;
display:inline-block;
position:fixed;
position:absolute;
目前就是用最后的一种方式来进行清除浮动，毕竟优雅~~~
原文地址：https://blog.csdn.net/u012396955/article/details/60341523