为什么这个 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);
}

它是静态定位的，应该位于其他 <div> 的下方，即 div#header 和 div#body。但出于某种原因，它似乎 也占据了 div#body。参见这张图片，例如：

注意 box-shadow 效果如何应用于整个 div#body 元素。底部居中的两条线应该是所有 div#footer.

div#body 也设置为 position:static（默认值）。我没有向它添加任何特定样式（但我对它的一些子元素添加了样式）。

我不知道发生了什么 -- 我以前从未遇到过这种情况。完整的代码在 JSfiddle 上，但我在这里 post 太多了。关于正在发生的事情和解决方案的任何想法？谢谢。

Answer 1

这是因为 div#body 元素正在自行折叠。

当元素绝对定位或浮动时（如您的情况），它们将从文档的正常流中移除。这是确认这一点的相关文件：

9 Visual formatting model - 9.5 Floats

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

在您的例子中，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（为说明添加了边框）

为什么这个 div 元素被前面的 div 元素封装了？

Why is this div element encapsulated by the previous div element?

html

css

css-position