css清除浮動常用的兩種方法

css清除浮動在網頁佈局中經常試用到的，下面兩個方法可以實現浮動

第一種方法是 clear:both;

（01）css代碼{ width:300px; background:#CCC; padding-bottom:10px; margin-bottom:10px;} { width:145px; height:100px; float:left; background:#F0F;} t{ width:145px; height:100px; float:right; background:#F00;}rboth{ clear:both;}html代碼<div class="Box"><div class="left"></div><div class="right"></div><div class="clearboth"></div></div>

第二種方法是用偽類:after寫入空白元素來清

（01）IE8以上和非IE瀏覽器才完全支持:after，IE6、IE7需要用ie的私有屬性zoom來觸發hasLayout才能完美兼容，沒有增加多餘的標籤，推薦使用。css代碼{ width:300px; background:#CCC; padding-bottom:10px; margin-bottom:10px;} { width:145px; height:100px; float:left; background:#F0F;} t{ width:145px; height:100px; float:right; background:#F00;}rfloat:after{ display:block; clear:both; content:""; overflow:hidden; height:0}rfloat{ zoom:1;}html代碼<div class="Box"><div class="left"></div><div class="right"></div><div class="clearboth"></div></div>