<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}
/*清除浮动代码*/
.clearfix:after{
display:block;
clear:both;
content:"";
visibility:hidden;
height:0}
.clearfix{zoom:1}
</style>
<div class="div1 clearfix">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>