常见的清除浮动方法

当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素，浮动元素会造成父元素高度塌陷。（如图）

所以当我们设置float后，要根据不同情况来清除浮动。下面介绍几种常用的方法。

1、设置父布局的css属性（不推荐）

设置父标签为浮动，但是这样会使其整体浮动，影响布局。
设置父标签合适的高度，前提必须确定子布局的高度，来计算父布局的合适高度，包裹住子布局。

2.、通过css属性clear

在最后一个浮动的盒子的后面，新添加一个标签。然后设置clear清除浮动。
这种情况下，父布局不能设置高度。

 <style>
      .clear{
            clear: both;
        }
 </style>
 <div class="parent">
        <div class="child">float div</div>
        <div class="clear"></div>
    </div>

优点： 通俗好理解。
缺点： 增加了太多的标签。

3、Overflow 清除浮动

这种情况下，父布局不能设置高度。
父级标签的样式里面加: overflow:hidden;为了照顾ie6，我们再加上 zoom:1;

   <style>
       .parent {
            width: 200px;
            /* height: 50px;  */
            padding: 10px 20px 20px 10px;
            background: red;
            margin: 0 auto;
            overflow: hidden;
            zoom:1;
        }
       .child {
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            background: green;
            float: left;
        }
  </style>
    <div class="parent">
        <div class="child">float div</div>
        <!-- <div class="clear"></div> -->
    </div>

优点： 代码书写方便
缺点： 如果这个父盒子，里面还有定位，就会引起麻烦。

4、After伪类清除浮动（推荐）

为父标签添加伪类After,设置空的内容，并且使用clear:both;
这种情况下，父布局不能设置高度。

  <style>
        .parent::after {
          content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
        }
  </style>

优点： 无需添加多余的标签，并且可以全局调用。（新浪、淘宝、腾讯基本采用这种方式）

新浪网 淘宝网 腾讯网

总结

在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；
在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；
如果父标签就是浮动元素则可自动清除内部浮动，无需格外处理（方法一）；
也可以使用邻接元素清理之前的浮动（类似方法二，不是通过手动添加元素清除浮动，而是利用邻近元素）；
最后最好使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰。