前言

什么是浮动？为什么要清除浮动？
解：当在调整页面布局时，如果子元素都设置了float浮动，那么父元素都高度就会为0，如果不清除浮动都影响继续布局页面，会造成之后元素的浮动元素和上面的浮动堆积在一起，会有很大的影响并且难以调整。
下面列举清除浮动的几种方法

方法一：设置父容器高度

最笨、最简单粗暴的方法，直接设置父容器的高度height为一个固定的值，
优点：简单、好理解、易掌握。
缺点：每个父容器都需要设置一个精确都高度值，还要根据子元素都内容随时进行调整

方法二：空div设置clear：both

在父容器的结尾处添加一个空内容的div标签，设置样式为clear为both；

<div id="container">

  <div style="clear:both"></div>//空div
</div>

优点：简单、代码少、浏览器支持好、不易出现问题
缺点：如果页面浮动多，每个父容器都要增加空div，不利于页面优化

方法三：overflow：hidden

给父容器添加overflow属性为hidden
优点：简单、代码少、浏览器支持好
缺点：如果使用position极有可能影响元素布局，因为超出的位置会被隐藏掉（不建议使用）

方法四：伪类after和zoom属性

父容器添加伪类:after 和 zoom属性

.clear{
  zoom:1/*可解决ie6,ie7浮动问题*/
}
.clear:after{
  clear:both;
  display:block;
  content:"";
  visibility:hidden;
  height:0;
}

使用时直接给父容器添加class即可

<div id="container" class="clear">
  xxx
  xxx
  xxx
</div>

优点：兼容性较好、不容易出现问题（非常推荐此方法）
缺点：初学者可能会难以理解，个人认为没什么缺点

© 允许规范转载