清除浮动

1. 在浮动元素后面添加 clear:both的空 div 元素

   <div class="container">
       <div class="left"></div>
       <div class="right"></div>
       <div style="clear:both"></div>
   </div>

2. 给父元素添加 overflow:hidden 或者 auto 样式，触发BFC

   <div class="container">
       <div class="left"></div>
       <div class="right"></div>
   </div>
   .container{
       width: 300px;
       background-color: #aaa;
       overflow:hidden;
       zoom:1;   /*IE6*/
   }

3. 使用伪元素，也是在元素末尾添加一个点并带有 clear: both 属性的元素实现的。

   <div class="container clearfix">
       <div class="left"></div>
       <div class="right"></div>
   </div>
   .clearfix{
       zoom: 1; /*IE6*/
   }
   .clearfix:after{
       content: ".";
       height: 0;
       clear: both;
       display: block;
       visibility: hidden;
   }