为什么这个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（加上用于说明边界）