DIV撐開

引用自：http://radzhang.iteye.com/blog/1678734

在CSS排版中，若是一個層中的層使用了float浮動的話，那麼就有可能會出現外層沒有被內層撐開的狀況，如如下代碼所示：

<div style="width:300px; ">
    測試
    <div style="width:100px; height:100px;  float:left; margin:10px;">
        左邊
    </div>
</div>

     若是要解決這個問題，能夠在外層的CSS中加上「overflow:auto」。

    在CSS中overflow屬於用來講明當內容溢出元素框時要怎麼處理，從上圖中能夠看出，內層已經溢出了外層，因此須要使用overflow屬性來指如何顯示內層中。overflow屬性的默認值是visible，也就是無論它是怎麼溢出的，溢出的內容不裁剪，任其顯示在元素框外面。

    除了visible值以後，overflow屬性還有如下幾個值：

• hidden：內容會被裁剪，溢出的部分看不到。
• scroll：使用滾動條來查看溢出的部分，始終顯示滾動條。
• auto：若是內容須要裁剪，則等於scroll，顯示滾動條；不然不顯示滾動條。
• inherit：從父元素中繼承overflow屬性值。不過之前的IE版本都不支持該屬性值，包括IE8，IE9還沒試過。

    因爲本例中，外層的CSS沒有指定overflow屬性，因此默認爲visible，也就是無論它怎麼個溢出法，因此，只要將外層的CSS中加上overflow:auto，如如下代碼所示：

<div style="width:300px;  overflow:auto;">
    外層
    <div style="width:100px; height:100px;  float:left; margin:10px;">
        內層
    </div>
</div>

    也許有人會說，爲何設置overflow:auto以後，外層就包含了內層，而不是將溢出的那部分使用滾動條顯示出來呢？這是由於沒有指定外層的高度，因此它就自適應了。若是指定了外層的高度，而內層的高度又大於外層的高度，那麼就會顯示滾動條了。如如下代碼所示。

<div style="width:300px;  overflow:auto; height:80px;">
    外層
    <div style="width:100px; height:100px;  float:left; margin:10px;">
        內層
    </div>
</div>

 

 

注：div內的控件若是設置了position:absolute 那麼div將不被自動撐開，必須設置爲relative；若是的確須要absolute，那麼只有固定設置div的高度