第一种方法是 clear:both;
css代码 .Box{ width:300px; background:#CCC; padding-bottom:10px; margin-bottom:10px;} .Box .left{ width:145px; height:100px; float:left; background:#F0F;} .Box .right{ width:145px; height:100px; float:right; background:#F00;} .clearboth{ clear:both;} html代码 <div class="Box"> <div class="left"></div> <div class="right"></div> <div class="clearboth"></div> </div>
第二种方法是用伪类:after写入空白元素来清
IE8以上和非IE浏览器才完全支持:after，IE6、IE7需要用ie的私有属性zoom来触发hasLayout才能完美兼容，没有增加多余的标签，推荐使用。 css代码 .Box{ width:300px; background:#CCC; padding-bottom:10px; margin-bottom:10px;} .Box .left{ width:145px; height:100px; float:left; background:#F0F;} .Box .right{ width:145px; height:100px; float:right; background:#F00;} .clearfloat:after{ display:block; clear:both; content:""; overflow:hidden; height:0} .clearfloat{ zoom:1;} html代码 <div class="Box"> <div class="left"></div> <div class="right"></div> <div class="clearboth"></div> </div>