清除浮动的五种方式

前前前前端的静静之第九篇博客
换个心情，学个css吧（其实是再看面试题，不熟悉而已，安慰自己真是一把好手）

浮动，会脱离标准文档流，所以为了解决这一弊端，需要在设置过浮动之后清除一下浮动带来的影响

1.给父元素增加高度

优点： 简单、代码少、容易掌握

缺点： 只适合高度固定的布局，要给出精确的高度，
          如果高度和父级div不一样时，会产生问题

2.overflow:hidden,通过设置BFC，解决浮动影响

优点： 简单、代码少、浏览器支持好

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉,
无法显示需要溢出的元素。不能和position配合使用，因为超出
的尺寸的会被隐藏

3. 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签

优点： 通俗易懂，书写方便。（不推荐使用）
缺点： 添加许多无意义的标签，结构化比较差

**4.使用after伪元素清除浮动： **

优点： 符合闭合浮动思想，结构语义化正确，不容易出现怪问
题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

缺点： 由于IE6-7不支持：after，使用zoom：1

5.使用before和after双伪元素清除浮动：（较常用推荐）

<style>
            .father{
                border: 1px solid black;
                *zoom: 1;
            }
            .clearfix:after,.clearfix:before{
                   content: "";
                   display: block;
                   clear: both;
               }
               .big ,.small{
                width: 200px;
                height: 200px;
                float: left;
               }
               .big{
                background-color: red;
               }
               .small{
                background-color: blue;
               }
        </style>
   <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
   </div>
    <div class="footer"></div>

</div>