为什么'overflow:hidden”会导致带有浮动元素的容器的高度意外增长？

溢出：浮动元素的隐藏和意外高度增长

问题：
溢出时：隐藏是应用于包含浮动元素的外部元素，为什么外部元素的高度会意外增长以包含浮动元素他们？

答案：
高度的意外增长是因为溢出：隐藏创建了一个新的块格式化上下文（BFC）。 BFC 根（包含不可见的溢出元素）会扩展其高度以容纳浮动（如果它们没有指定的高度）。

根据 CSS 规范，阻止格式化上下文根“拉伸以包含如果它们本身没有指定高度，则它们会按高度浮动，默认为自动。”此高度增加也适用于底部边距边缘超过 BFC 根的底部内容边缘的浮动后代。

与清除浮动的区别
请注意，此行为与浮动清除不同，后者仅当应用清除属性并且有前面的浮动要清除时发生。在这种情况下：

• 在 BFC 根外部的元素上使用clear: Both 会清除浮动，但不会导致外部元素拉伸。
• 将零高度元素放置为清除：都位于 BFC 根内部，确保外部元素向下拉伸以容纳浮动元素的底部边缘（称为“clearfix”）。

以上是为什么'overflow:hidden”会导致带有浮动元素的容器的高度意外增长？的详细内容。更多信息请关注PHP中文网其他相关文章！