使用 after 偽類清除浮動

以前清除浮動的時候總是在想要清除浮動的元素後面加上

 <div style="clear:both;"></div>

或寫在br標籤裡面來解決，但這樣會增加無語意的標籤，下面是用after偽類實現，相容於多種瀏覽器

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

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

 .clearfix{zoom:1}

在一般情況下，如果父層內部有浮動(float)可能導致父層的高度為0，加上clearfix後就行了

HTML：

 <p class="parent clearfix">
     <p class="left">left</p>
     <p class="right">right</p>
 </p>

#CSS:

.clearfix{zoom:1}    
.clearfix:after{
    content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.parent{
    background-color:red;
    width:120px;
}
.left{
    float:left;
    background-color:pink;
    height:60px;
}
.right{
    float:right;
    background-color:#abcdef;
}

更多使用after 偽類別清除浮動相關文章請關注PHP中文網！