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?

中所述

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

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

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

1 个答案: