为什么 CSS2.1 使用'overflow”而不是'visible”来创建块格式上下文？

为什么 CSS2.1 强制使用“Visible”以外的溢出值来建立新的块格式化上下文？

在 CSS2.1 中，指定“visible”以外的溢出值来创建新的“块格式化上下文”。这一决定引发了人们对组合两个看似不相关的功能背后的基本原理的质疑：创建块格式化上下文 (BFC) 和抑制溢出。

历史背景和关键考虑因素

根据 CSS 邮件列表上的查询，此决定源于解决与浮动相交的框内滚动的需​​要。原始 CSS 2.0 规范要求浏览器在滚动期间重新包装入侵浮动周围的内容，从而导致性能问题。

CSS2.1 修订通过为“可见”以外的溢出值建立新的 BFC 来防止这种重新包装。这可以确保：

• 新 BFC 中的内容不会受到浮动的影响。
• BFC 的滚动行为不会受到浮动的影响。

示例

考虑以下内容例如：

<div>...</div>
<div>
  ...:
  ...:
</div>

div {
  height: 80px;
}

div:first-child:before {
  float: left;
  height: 100px;
  margin: 10px;
  content: 'Float';
}

在CSS 2.0中，使用overflow:visible（默认），第二个框与浮动元素重叠。然而，使用 Overflow: auto (CSS 2.1)，第二个框获得一个新的 BFC，防止浮动与其内容相交。

溢出的含义：隐藏

尽管“overflow:hidden”通常会隐藏溢出的内容，但它仍然允许以编程方式滚动。这很重要，因为包含相交浮动的溢出：隐藏的框还必须建立新的 BFC 以防止滚动期间重新包装。

CSS2.1 中引入的更改

CSS2 .1 引入了其他更改：

• 阻止格式化上下文根元素（具有溢出值的元素，其他比“可见”）现在垂直拉伸到其浮动的高度。
• 具有溢出：隐藏和高度：自动的框受到其容器边界的限制，并且不能再与浮动相交。

一致性和性能

最终，决定创建一个新的对于“可见”以外的溢出值的 BFC 主要是出于性能考虑以及对处理溢出内容的一致性的期望而驱动的。这种方法优化了滚动性能并保持了可预测的布局。

以上是为什么 CSS2.1 使用'overflow”而不是'visible”来创建块格式上下文？的详细内容。更多信息请关注PHP中文网其他相关文章！