讓內層將外層撐開

在css排版中，如果乙個層中的層使用了float浮動的話，那麼就有可能會出現外層沒有被內層撐開的情況，如以下**所示：

執行結果如下圖所示

如果要解決這個問題，可以在外層的css中加上「overflow:auto」。

在css中overflow屬於用來說明當內容溢位元素框時要怎麼處理，從上圖中可以看出，內層已經溢位了外層，所以需要使用overflow屬性來指如何顯示內層中。overflow屬性的預設值是visible，也就是不管它是怎麼溢位的，溢位的內容不裁剪，任其顯示在元素框外面。

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

由於本例中，外層的css沒有指定overflow屬性，所以預設為visible，也就是不管它怎麼個溢位法，所以，只要將外層的css中加上overflow:auto，如以下**所示：

執行結果如下圖所示：

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

以上**的執行結果如下圖所示。