清除浮动

清除浮动以前效果图：父元素没有被撑开


清除浮动以后效果图：父元素被撑开了：

原有代码结构如下：

<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}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 
</div>
<div class="div2">
   div2
   </div>

1、 方法一：添加新的元素 、应用 clear：both；

<style type="text/css"> 
  /*添加css样式*/
   .clear{clear:both;}
   </style> 
<div class="div1"> 
<div class="left">Left</div> 
<div class="right">Right</div> 

/*添加空标签*/
<div class="clear"></div>
</div>
<div class="div2">
   div2
   </div>

2、定义父级div伪类：after和zoom，添加样式如下：

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/
.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/
<div class="div1 outer"> 

3、方法三：父级div定义 overflow: auto（注意：是父级div也就是这里的  div.outer）

<style type="text/css">   
/*添加css样式
   .over-flow{overflow: auto;zoom:1;}
//zoom: 1; 是在处理兼容性问题
   </style> 
<div class="div1 over-flow">