清除浮动的8中方法

 

  1：给父级定义height 高度固定的布局

       
  2：外墙法 结尾处加空div标签 clear:both(不推荐) 缺点：过于添加多余的div

  3：父级div定义 伪类:after 和 zoom(推荐)

<style type="text/css"> 
.div1{
     background:#000080;
     border:1px solid red;
} 
.div2{
     background:#800080;
     border:1px solid red;
     height:100px;
     margin-top:10px
     } 
.left{
     float:left;
     width:20%;
     height:200px; 
     background:#DDD
     } 
.right{
     float:right;
     width:30%;
     height:80px;
     background:#DDD
      } 
   /*清除浮动代码*/ 
  .clearfloat:after{
       display:block;
       clear:both;
        content:"";
        visibility:hidden;
        height:0
     } 
  .clearfloat{
      zoom:1
     } 
</style> 
<div class="div1 clearfloat"> 
<div class="left">1</div> 
<div class="right">2</div> 
</div> 
<div class="div2"> 
div2 
</div>

  4: 父级div定义 overflow:hidden 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。 

  5:  父级div定义 overflow:auto   缺点：内部宽高超过父级div时，会出现滚动条。 

  6: 父级div 也一起浮动 float:left 缺点：会产生新的浮动问题。 

  7: 父级div定义 display:table   缺点：会产生新的未知问题。 

  8: 内墙法在第一个盒子结尾处增加一个div然后添加clear:both  建议：不推荐使用，只作了解。