CSS左右布局浮动高度问题

<style>
    .left{float:left;width:200px}
    .right{margin-left:220px;}
    .clearfix:before{
      content: " ";
      display: table;
    }
    .clearfix:after{
      clear:both;
    }
</style>




<div class="left">
    <div style="height:500px;background:red"></div>
</div>


<div class="right">
    <div class="clearfix">11111111</div>
    <div >222222</div>
</div>

这么写样式实现左右布局，右侧的第一个div和第二个div之间有很大的间距，是cleardix：after造成的，请问这个怎么处理？ absolute 是一种方法 还有其他的吗