<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>