clear_float.html

<style type="text/css">

  #container { border: 1px solid #000; }

  #left { background:  #ccc; width: 300px; float: left; height:200px; }

  #right { background: #ddd; width: 300px; float: right; height:200px;}

  /* self clearing rules ie8以上及其firefox、chrome等浏览器支持 */

  #container:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

  #container { *zoom:1; }

</style>


 <div id="container">

    <div id="left">
        left content
    </div>

  <div id="right">
      right content
  </div>

 </div>