为什么当“溢出”设置为“隐藏”时内容可见？

Question

我试图更好地理解 CSS 的“溢出”属性。在下面的示例中，我看到了overflow:hidden;，但灰色背景是可见的，并且达到了div 宽度的全部 300%。

http://jsfiddle.net/emeRJ/3/

如果溢出是“隐藏的”，我希望背景被剪裁，不可见。如果我将其更改为“可见”，灰色背景将完全消失。我对此感到困惑，并希望对此有深入的了解。

有人可以描述这两个选项发生了什么吗？ 哪个元素实际上“溢出”了？

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

如果你有一个元素的溢出设置为不同的东西 比“可见”，元素的高度将根据 里面的浮动元素。

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

Answer 1

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

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

如果容器比内容窄，您会看到剪辑。你可以玩下面的sn-p：

.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>