清除浮动的8种方法

清除浮动的几种方式

1.给父级div定义伪类：after和zoom

.clearfloat:after{display:block;clear:both;content:"";overflow:hidden;height:0;}
.clearfloat{zoom:1;}

这种是最常用的清除浮动的方法也是最推荐的，用起来非常的爽，直接在浮动的两个元素的父级加一个clearfloat类名就可以，兼容IE6、7、8所带的浮动问题；

2.在浮动尾部添加空div标签clear:both;

.clearfloat{clear:both;}
<div class='clearfloat'></div>

这种清除浮动的方法不推荐，需要增加好多不必要的代码，要是好多结构都是浮动的话，那你的崩溃，主要是利用css提高的clear:both清除浮动，让父级能够获取到高度，这个也能够兼容IE；

3.父级div定义overflow:hidden

.div {overflow:hidden;}

这种清除浮动的方法只推荐没有使用position或对overflow:hidden理解比较深的朋友使用,必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度,千万不要感觉这个特别好用就放不下了，等到你遇到问题的时候就和你加的这个有关，很坑！（友情请示）

4.父级给高度height

这种清除浮动的方法不推荐使用，很不友好，一般代码写的多就知道，一般图片盒子什么的都不给固定的高度，这里定义高度会给后期加内容或者维护带来不便；

5.父级div定义overflow:auto

.div{overflow:auto;}

这种清除浮动的方式也不推荐，如果你需要出现滚动条或者确保你的代码不会出现滚动条就使用吧，一旦内容超过了父级的盒子就会出现滚动条

6.父级随子级一起浮动

这种清除浮动的方式也不推荐，要是这样就更完了，那父级上面的盒子都需要浮动，然后你就看着办吧

7.父级div定义为表格display:table

.div{display:table;}

这种清除浮动的方式也不推荐,这样的话div就变成表格的形式了，要是需要设定哪个子元素在某一个位子就难受了，还会有很多问题，我就不一 一说

8.加br标签

这种清除浮动的方式也不推荐,了解就好，要是你在公司上班被你项目经理看到准备好收拾东西走吧，要是你在学习阶段，你代码拿给哪个大佬看，对方不会理你

推荐第一种用法，感兴趣的可以把这些清除浮动都试试，第一次写博客，一般都是写在自己的记事本上面，听说大牛都爱写博客，也能够更好地提高自己，向大佬学习