清除浮动的几种方法以及详解

1.给父元素div定义高度height



父级div手动定义height，就解决了父级div无法自动获取到高度的问题，但是这种限制了兼容性的问题，而且子元素高度必须和父元素一样，不然会出错。

2. 结尾处加空div标签 clear:both



添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度，但是这种方法如果页面浮动布局多，就要增加很多空div，会使html代码非常复杂。建议简单页面使用。

3. 父级div定义 伪类:after 和
zoom 



这种方法推荐使用，代码少，理解性强，可以写在公共样式中作为通用样式。一开始我也是死记硬背的，慢慢一点点的你就理解原理了。至于：after和zoom前者是高版本浏览器兼容，后者是针对于低版本浏览器（主要针对IE7及以下）。

4. overflow：hidden



使用overflow:hidden时，浏览器会自动检查浮动区域的高度
，不能和position配合使用，因为超出的尺寸的会被隐藏。

这是本人总结的几种清除浮动的方法，也有参考过别人。希望对大家有所帮助