3.浮动问题解决方案

  <style>

    .bar{

      /*overflow:hidden;*/   

　　　/*BFC解决方案在没有position情况下使用；应为超出部分会隐藏*/

　　　/*BFC参考第二篇随笔*/

      border:1px solid blue;

    }

    .bar:after{

      content:"";

      display:block;

      clear:both;

    }

    .bar{

      *zoom:1;  /*ie专有属性 清除浮动 ie6 ie7*/

    }

    .child{

      float:left;

      width:100px;

      height:100px;

      border:1px solid red;

    }

  </style>

 

  <div class="bar">

    <div class="child"></div>

    <div class="child"></div>

  </div>

 

总结：两种解决方案

　　1.在父元素中加 overflow：hidden；但是在没有position情况下使用，因为超出部分会被隐藏；

　　2.在父元素中加

　　　　.bar:after{

   　　   content:"";

 　 　　  display:block;

  　　    clear:both;

    　　}

　　　　.bar{zoom:1;  /*ie专有属性 清除浮动 ie6 ie7*/}