CSS清除浮动的8种方法及优缺点

浮动产生的影响

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及宽高属性。解决浮动引起的问题有多种方法，但是有些方法在浏览器兼容性方面有问题。

1.父级div定义高度

原理：给父元素手动添加height，可以解决父元素无法获取高度的问题。
优点：代码少，简单。
缺点：适合高度固定的布局。因为要给出确定的高度，所以高度和父级div不一样就会产生问题。
建议：建议在高度固定的布局中使用。

2.结尾添加空div标签

原理：结尾添加空的div标签，添加声明clear:both清除浮动，让父级div自动获取高度。
优点：简单且代码量少，浏览器支持好。
缺点：如果页面浮动布局多，就要增加很多空div。
建议：不建议使用。

3.父级div添加伪对象：after和zoom

原理：IE8以上和非IE浏览器支持:after，ie6,ie7可以用zomm：1声明解决。原理和2类似。
优点：浏览器支持好。大型网站都有使用。
缺点：代码多。
建议：建议使用，定义公共类，减少CSS代码。

4.父级div添加声明 overflow:hidden

原理：必须定义width或者zoom:1，同时不能定义height，使用这个声明的时候，浏览器会自动检查浮动区域的高度
优点：代码少，浏览器支持好
缺点：不能和position配合使用，超出的尺寸会被隐藏。
建议：推荐没有使用position或会overflow:hidden理解比较深的朋友使用。

5.父级div添加声明 overflow:auto

原理：必须定义width或者zoom:1，同时不能定义height，使用这个声明的时候，浏览器会自动检查浮动区域的高度
优点：代码少，浏览器支持好
缺点：不能和position配合使用，超出的尺寸会出现滚动条。
建议：不推荐使用，在需要滚动条的场景下推荐使用。

6.父级div添加浮动

原理：所有盒子一起浮动，在一个层级，就成了一个整体
优点：无
缺点：产生新的浮动问题
建议：不推荐使用

7.父级div添加display:table

原理：将div属性变成表格
优点：无
缺点：产生其他问题
建议：不推荐使用

8.结尾添加br标签添加声明clear:both

原理：父级div定义zoom:1解决IE浮动问题，结尾出加br标签clear:both
建议：不推荐使用