为什么这个div元素由前一个div元素封装？

Question

在我正在玩的这个JSfiddle中，我做了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); } ，开始表现得非常奇怪。

目前，它的CSS设置为：

<div>

静态定位并且应该位于其他div#header下方，div#body和div#body。但出于某种原因，似乎也会占用 box-shadow。请参阅此图片，例如：

注意div#body效果如何应用于整个div#footer元素。底部两条居中的行应该是div#body的全部。

position:static也设置为{{1}}（默认）。我没有添加任何特定的样式（但我对它的一些子元素做了）。

我不知道发生了什么 - 这在我以前从未发生过。完整的代码在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（添加了边框用于说明）