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