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

<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：

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

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 偽類清除浮動實例，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！