【遇到的問題】父div不能被撐開

如何修正DIV float以後致使的外部容器不能撐開的問題 

在寫HTML代碼的時候，發如今Firefox等符合W3C標準的瀏覽器中，若是有一個DIV做爲外部容器，內部的DIV若是設置了float樣式，則外部的容器DIV由於內部沒有clear，致使不能被撐開。看下面的例子：

HTML4STRICT代碼：

<div style="width:200px;border:1px 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;">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 style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
</div>

顯示的結果以下：

容器DIV沒有被撐開

你們能夠看到，做爲外部容器的邊框爲紅色的DIV，沒有被撐開。這是由於內部的DIV由於float:left以後，就丟失了clear:both和display:block的樣式，因此外部的DIV不會被撐開。

解決方案1：在子元素最後增長「<div style="clear:both;"></div>」

<div style="width:200px;border:1px 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;">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 style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
</div>

最後撐開的效果爲：

方案2 ：

< div class = "clearfix" >

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

< div class = "right" >

</ div >

</div>

父div增長樣式clearfix

.clearfix:after {       /*在類名爲「clearfix」的元素內最後面加入內容；*/
    content: ".";     /*內容爲「.」就是一個英文的句號而已。也能夠不寫。*/
    display: block;   /*加入的這個元素轉換爲塊級元素。*/
    clear: both;     /*清除左右兩邊浮動。*/
    visibility: hidden;     /*可見度設爲隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然佔據空間，只是看不到而已；*/
    line-height: 0;    /*行高爲0；*/
    height: 0;     /*高度爲0；*/
    font-size:0;    /*字體大小爲0；*/
}
.clearfix { *zoom:1;}   /*這是針對於IE6的，由於IE6不支持:after僞類，這個神奇的zoom:1讓IE6的元素能夠清除浮動來包裹內部元素。具體意思的話，不用深究，據說微軟的工程師本身都沒法解釋清楚。height:1%效果也是同樣。*/