为什么'overflow:hidden”会扩展带有浮动子元素的父元素的高度？

溢出：隐藏和带有浮动子元素的元素高度扩展

令人惊讶的是，在外部元素上设置溢出：隐藏可能会导致它增加高度以容纳浮动的子元素。为了理解为什么，让我们深入研究块格式化上下文的概念。

当遇到溢出设置为不可见值（例如隐藏）的块元素时，它会建立一个新的块格式化上下文。至关重要的是，如果块格式化上下文根（这些元素被称为元素）没有明确设置高度，则它们预计会垂直拉伸以包含其浮动后代。

此行为源于 CSS2 中引入的修订。 1 解决不同的问题。此更改有效扩展了间隙的概念，其中浮动的底部边缘由其包含块（父级）包含，以应用于没有指定高度的块格式化上下文根。

在提供的示例中，外部元素设置为溢出：隐藏，触发创建新的块格式化上下文。由于外部元素没有指定高度，因此默认为 auto 并向下拉伸以包围浮动的内部元素。

将此现象与浮动间隙区分开来非常重要。当具有clear：两者或类似效果的元素迫使前面的元素漂浮到容器顶部时，就会发生间隙。相反，溢出块格式上下文根以包含浮点数仅发生在该上下文内，对其外部的元素没有影响。

以上是为什么'overflow:hidden”会扩展带有浮动子元素的父元素的高度？的详细内容。更多信息请关注PHP中文网其他相关文章！