以前清除浮動的時候總是在想要清除浮動的元素後面加上
<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:
c7c162f4346c5f9b366c4224b512a308 ef97f43c01124fc78febd898df2aef5eleft94b3e26ee717c64999d7867364b1b4a3 d63265fd15dd0bd32166bea3d879ea48right94b3e26ee717c64999d7867364b1b4a3 94b3e26ee717c64999d7867364b1b4a3
#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中文網!