爲什麼這個div元素被前一個div元素封裝？

Question

在我玩這個JSfiddle時，我做了一個div#footer，開始表現怪異。

現在，它的CSS設置爲：

div#footer { 
    width: calc(100% + 100px); 
    margin-left: -50px; 
    text-align: center; 
    padding: 10px; 
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); 
    background-color: rgba(255, 255, 255, 0.8); 
} 

它staticly定位和應該坐在下面的其他<div> s，這是div#header和div#body。但由於某種原因，它好像也需要div#body。看到此圖像，例如：

通知的box-shadow效果是如何應用到整個div#body元件。底部的兩條中心線應該是所有的div#footer。

div#body也設置爲position:static（默認）。我沒有添加任何特定的樣式（但我對其中的一些子元素進行了添加）。

我不知道發生了什麼 - 這在我之前從未發生過。完整的代碼在JSfiddle上，但是我在這裏發佈太多了。關於正在發生的事情和解決方案的想法？謝謝。

Answer 1

這是因爲div#body元素正在崩潰。

當元件被絕對定位或浮動（如在你的情況），它們是從該文件的正常流中去除。下面是有關文件確認此：

9 Visual formatting model - 9.5 Floats

由於浮子是不是在流動的，非定位在所述浮動框之前和之後垂直流動好像浮不存在創建的塊框。但是，根據需要縮短浮動框旁邊創建的當前和隨後的線框，以便爲浮動框的邊距框騰出空間。

在你的情況下，所有div#body元素的直接子元素浮動。由於這個原因，div#body元素基本上會自行摺疊，因爲它沒有任何尺寸。

您需要申請a clearfix到div#body元素，例如：

Updated Example

#body { 
    overflow: auto; 
} 

或：

Updated Example

#body:after { 
    content: ''; 
    clear: both; 
    display: table; 
} 

另外，您還可以添加clear: both到#footer元素：

Updated Example

#footer { 
    clear: both; 
} 

Answer 2

看來，你錯過了div#body元素的clearfix解決方案，因爲它有漂浮的孩子。試試這個：

div#body { 
    overflow: auto; 
} 

DEMO（加上用於說明邊界）