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

在我玩的这个游戏中，我做了一个

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);
}

它是静态定位的，应该位于其他

的下方，即

div#header

和

div#body

。但出于某种原因，它似乎也占据了

div#body

。例如，请参见此图：

请注意，

box shadow

效果是如何应用于整个

div#body

元素的。底部的两条居中线应该是所有

div#footer

div#body

也设置为

位置：static

（默认）。我没有向它添加任何特定的样式（但我添加了它的一些子元素）

我不知道发生了什么事——这在我身上从未发生过。完整的代码在JSFIDLE上，但我无法在这里发布。对正在发生的事情和解决方案有什么想法吗？谢谢。

这是因为

div#body

元素本身正在崩溃

当元素绝对定位或浮动时（如您的情况），它们将从文档的正常流程中删除。以下是相关文件，证实了这一点：

由于浮动不在流中，因此在浮动框之前和之后创建的未定位块框垂直流动，就好像浮动不存在一样。但是，在浮动旁边创建的当前和后续行框会根据需要缩短，以便为浮动的边距框留出空间

在您的例子中，

div#body

元素的所有直接子元素都是浮动的。因此，

div#body

元素本质上会在其自身上塌陷，因为它没有任何维度

您需要应用于

div#body

元素，例如：

或：

或者，您也可以将

clear:both

添加到

#footer

元素：

---

您似乎缺少

div#body

元素的解决方案，因为它的子元素是浮动的。试试这个：

div#body {
    overflow: auto;
}

---

（添加边框以供说明）

谢谢您的回答！我听说过，但我不知道这是什么意思。谢谢

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

#footer {
  clear: both;
}

div#body {
    overflow: auto;
}