Edit in JSFiddle


              
            
          
            
              
                
<div class="wrap clearfix"  >
    <h2>6) 使用:after伪元素 </h2>
    <div class="box1 left">box1   float:left;</div>
    <div class="box2 left">box2   float:left;</div>
</div>
<div class="footer">.footer</div>
.clearfix:after {
    content:"\200B"; 
    display:block; 
    height:0; 
    clear:both; 
}
.clearfix { *zoom:1; }
.box1{
    height:100px;
    background:#99FF33;
}
.box2{
    height:100px;
    background:#FF99FF;
}
.left{
    float:left;
}
.right{
    float:right;
}
.wrap{
    border:solid 1px black; 
}
.footer{
    background:lightblue;
}