关于css溢出的一些困惑

Question

最近我在学习一些关于 CSS 的东西，我发现了一些关于 overflow 的很棒的技巧：

将浮动元素的父元素设置为overflow:hidden或overflow:auto可以防止父元素折叠

<div style="overflow: auto;">
    <div style="float: left;">Div 1</div>
    <div style="float: left;">Div 2</div>        
</div>

使两列具有相同的高度，在每个浮动元素的 bottom 处设置足够大的填充，并在底部用相等的负数 margin 来抵消它相同的元素。诀窍是将父容器上的 overflow 设置为 hidden

我无法想象它是如何工作的，为什么 overflow 如此晦涩？有人可以解释一下吗？

Answer 1

您在 1 中描述的 clearfix 行为是 overflow 的众所周知的属性，您可以在此处看到：https://css-tricks.com/almanac/properties/o/overflow/#article-header-id-6 and http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/ and this is an expected behavior, since it is part of the CSS 2.1 spec: https://www.w3.org/TR/2004/CR-CSS21-20040225/visudet.html#root-height（请参阅 10.6.7 'Auto' 高度的最后一句用于块格式化上下文根段落）

2（正如@alohci 在评论中所说）是 overflow: hidden 预期的行为。

有关详细信息，您可以阅读官方规范：https://www.w3.org/TR/CSS22/visufx.html#overflow

Some confusions about css overflow