盒子清除浮动

1.上下两个盒子，上面的外层盒子即父级没有给高度在左右拉伸时会导致浮动问题，所以要清楚浮动。

可以在盒子下面加div---清除浮动。or两个两个盒子中间

<div class="clearfloat"></div>

.clearfloat{clear:both} 

例子：

<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 class="clearfloat"></div> 
</div> 
<div class="div2"> 
　　div2 
</div>