3. Floating Problem Solution

  <style>

    .bar{

      /*overflow:hidden;*/   

　　　/*BFC solution is used without position; it should be hidden */

　　　/*BFC reference second essay*/

      border:1pxsolidblue;  

    }

    .bar:after{

      content:"";

      display:block;

      clear:both;

    }

    .bar{

      zoom : 1 ;   /*ie-specific properties clear floating ie6 ie7*/

    }

    .child{

      float:left;

      width:100px;

      height:100px;

      border:1pxsolidred;  

    }

  </style>

 

  <divclass="bar"> 

    <divclass="child"></div> 

    <divclass="child"></div> 

  </div>

 

Summary: Two Solutions

　　1. Add overflow: hidden to the parent element; but use it without position, because the excess part will be hidden;

　　2. Add to the parent element

　　　　 .bar:after{

   　　   content:"";

 　 　　  display:block;

  　　    clear:both;

    　　}

　　　　 .bar { zoom : 1 ;   /*ie-specific properties clear floats ie6 ie7*/ }