div+css清除浮动代码

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