为什么当 "overflow" 设置为 "hidden" 时内容可见？

Question

我正在尝试更好地了解 CSS "overflow" 属性。在下面的示例中，我看到了 overflow:hidden;，但灰色背景是可见的，并且达到了 div 宽度的 300%。

如果溢出是 "hidden" 我希望背景被剪裁，不可见。如果我将其更改为 "visible"，灰色背景将完全消失。我对此感到困惑，希望对此有一个深刻的了解。

有人可以描述一下这两个选项的情况吗？哪个元素实际上是 "overflowing"?

我从上一个问题中找到了上面的例子Properties on CSS overflow

If you have an element that has overflow set to something different than "visible", the height of the element will be expand according to the float elements inside.

据我所知，在这种情况下，元素的宽度正在扩大。但是，从语义上讲，它没有任何意义。如果一个对象 "visible" 我希望它是可见的，而不是隐藏的，反之亦然。

Answer 1

在您的示例中没有溢出，因此 overflow: hidden 除了建立块格式化上下文外没有太大关系。

建立块格式化上下文只是一个副作用，它使容器包装浮动内容，如 Floating elements within a div, floats outside of div. Why?

中所述

如果容器比内容物窄，您会看到剪裁。您可以使用以下代码片段：

.box {
  width: 200px;
  overflow: hidden;
  background-color: #c3c3c3;
  clear: left;
}
.sub_box {
  float: left;
  width: 400px;
  height: 100px;
  border: 1px solid black;
}
input {
  float: left;
  clear: left;
}
label {
  float: left;
}
#overflow-visible:checked ~ .box { overflow: visible; }
#overflow-visible-bfc:checked ~ .box { overflow: visible; float: left; }
#overflow-hidden:checked ~ .box { overflow: hidden; }
#overflow-scroll:checked ~ .box { overflow: scroll; }
#overflow-auto:checked ~ .box { overflow: auto; }

<input type="radio" name="overflow" id="overflow-visible" checked />
<label for="overflow-visible"><code>overflow: visible</code></label>
<input type="radio" name="overflow" id="overflow-visible-bfc" />
<label for="overflow-visible-bfc"><code>overflow: visible</code> + BFC</label>
<input type="radio" name="overflow" id="overflow-hidden" />
<label for="overflow-hidden"><code>overflow: hidden</code> (BFC)</label>
<input type="radio" name="overflow" id="overflow-scroll" />
<label for="overflow-scroll"><code>overflow: scroll</code> (BFC)</label>
<input type="radio" name="overflow" id="overflow-auto" />
<label for="overflow-auto"><code>overflow: auto</code> (BFC)</label>
<div class="box">
  <div class="sub_box"></div>
  <div class="sub_box"></div>
</div>

为什么当 "overflow" 设置为 "hidden" 时内容可见？

Why is content visible when "overflow" is set to "hidden"?

html

css

overflow