CSS萬能閉合代碼

.clearfix:after{
 content:".";
 display:block;
 height:0;
 line-height:0;
 clear:both;
 visibility:hidden;
}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix{display:block;}
/* End hide from IE Mac */
/* end of clearfix */

 

例子：

<div style="border:2px solid red;">
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">CSSBBS</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
  <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

大家可以看到，作為外部容器的邊框為紅色的DIV，沒有被撐開。這是因為內部的DIV因為float:left之後，就丟失了clear:both和 display:block的樣式，所以外部的DIV不會被撐開。

此時給外圍div加一個clearfix的class便可以解決

這篇文章也不錯