CSS2.1 中的不可见溢出如何创建块格式上下文并影响布局？

CSS2.1 中的溢出行为：建立新的块格式化上下文

在 CSS2.1 中，规范要求除“visible”建立一个新的块格式化上下文（BFC）。这一决定引起了人们对合并两个看似不相关的功能背后的基本原理的质疑：BFC 创建和溢出隐藏。

建立具有不可见溢出的 BFC 的基本原理

主要造成这种行为的原因在于需要确保某些场景下的平滑滚动。当内容溢出的容器可滚动时，允许浮动与该内容相交将需要浏览器在用户滚动时不断地重新包裹浮动周围的内容。这种重新包装过程会严重影响滚动性能。

不可见溢出对布局的影响

当不可见溢出的元素建立 BFC 时，整个元素被推到一边，为同一块格式化上下文中的任何浮动元素让路。此行为可以防止元素的边框框与浮动的边距框重叠，从而确保正确的布局。

使用高度拉伸元素：自动和不可见溢出

CSS2.1 引入了一项额外的更改，其中具有 height: auto 和不可见溢出的元素将垂直拉伸以匹配其浮动的高度。此更改允许此类元素完全包含其浮动内容而无需剪切。

溢出行为的例外

尽管建立具有不可见溢出的新 BFC 的一般规则，也有例外：

• 如果元素有固定高度，则浮动会被夹入容器和元素中不拉伸。
• 如果元素同时应用了clear: left 或clear:，无论是否有不可见的溢出，它都会被垂直推送。

结论

在 CSS2.1 中建立具有不可见溢出值的新块格式化上下文的决定主要是由需要增强滚动性能并确保存在浮动时布局一致。此行为以及有关高度元素的附加更改：自动和不可见溢出，提供了更强大且可预测的布局模型。

以上是CSS2.1 中的不可见溢出如何创建块格式上下文并影响布局？的详细内容。更多信息请关注PHP中文网其他相关文章！