用偽類清除浮動是目前比較常用的一種方法
.clearFloat:after{
      content:".";
      clear:both;
      display:block;
      height:0;
      overflow:hidden;
      visibility:hidden;
    }








以前總是加一個<div sytle="clear:both"></div>來解決，但這樣會增加無語義的標籤，下面是用after偽類實現，相容多種瀏覽器
.clearfix:after{
     content:".";        
     display:block;        
     height:0;        
     clear:both;        
     visibility:hidden;        

}

為相容IE6,IE7，因為ie6,ie7不能用after偽類。加上下面程式碼

.clearfix{zoom:1}

一般情況下，如果父層內部有浮動(float)可能導致父層的高度為0，加上clearfix後就行了：
<style type="text/css">
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

.clearfix{zoom:1}
.parent{background-color:red;width:120px;}
.left{float:left;display:inline;}
.right{float:right;display:inline;}
</style>

<div class="clearfix">
 <div class="left">
      left
    </div>
    <div class="right">
      right
    </div>
</div>