CSS中的浮动闭合问题，以及为了解决CSS中的浮动闭合所采用的清楚浮动的方法

         1.CSS中的浮动闭合问题

CSS中存在浮动的闭合问题，当父元素的高度自适应，子元素在父元素内浮动，结果是父元素无法闭合

子元素，造成父元素塌陷。距离来说：

   <div class="container">

       <div class="div1">子元素</div>

   </div>

   <style>

      .container{
width:200px;
border:2px solid red;

        }

      .div1{
width:100px;
height:100px;
background-color:blue;
float:left;

       }

  </style>

结果为：



我们发现父元素无法闭合子元素，因为子元素的浮动造成了父元素的塌陷。

           2.为了解决这个问题，我们可以采用CSS中的浮动的清除

         （1）在结尾处加一个空元素，并设置clear:both;

          <div class="container">

           <div class="div1">子元素</div>

           <div class="clearfix"></div>

         </div>

          <style>

          .clearfix{
   clear:both;

                       }

         </style>

          结果为：


          清除了浮动，并且闭合了父元素；

          （2）通过CSS伪类:after来清除浮动

          .clearfix:after{

               content:"";

               clear:both;

               display:block;

               visibility: hidden;

               height:0;

            }

          .clearfix{
      zoom:1;

           }

        （3）通过BFC（块级格式化上下文来清除浮动）

           请参考http://blog.csdn.net/liwusen/article/details/50771200中对于BFC的描述

           简单的说，就是通过给父元素添加下面几个属性，使其变成BFC模型

           具体来说可以添加一下属性之一： overflow:hidden,overflow:scroll等

                                                                  float:left/right;

                                                                  position:absolute/relative/fixed;