html - 为什么不缩小以适应溢出行为：输入元素的隐藏工作？

Question

这个问题的答案是“将输入包装在一个跨度中，并应用于overflow: hidden该跨度”。

这是有效的，因为它为 span 建立了一个新的块格式化上下文，为 floats 腾出空间。

为什么overflow: hidden直接应用到输入不起作用？为什么有必要将输入包装在一个跨度中？

Answer 1

浮点数旁边的块格式化上下文的行为没有完全指定。从 CSS2.1（强调添加）：

表格的边框框、块级替换元素或正常流中建立新块格式上下文的元素（例如具有“溢出”而不是“可见”的元素）不得与any 浮动在与元素本身相同的块格式化上下文中。如有必要，实现应通过将其放置在任何先前的浮动下方来清除所述元素，但如果有足够的空间，可以将其放置在此类浮动附近。他们甚至可以使所述元素的边框比第 10.3.3 节定义的更窄。CSS2 没有定义 UA 何时可以将所述元素放在浮动旁边，或者所述元素可以变窄多少。

所以（不令人满意的）答案实际上是“这就是浏览器的行为方式”。这意味着依赖于“缩小以适应”行为的布局——在问题的示例中，通过将输入包装在一个跨度中产生的效果——依赖于未指定的浏览器行为。从规范的角度来看，浏览器也可以始终清除浮动下方的块格式化上下文。

似乎有一些活动可以更好地为 CSS3 指定 CSS 的这个角落，但我还没有找到任何权威的东西。

Answer 2

Overflow: hidden适用于容器元素，指示浏览器如何管理超出容器边界定义限制的内容。通过将 overflow: hidden 直接添加到输入中，您实际上并没有添加任何内容，因为输入没有任何子元素来影响定位或比例。

设置溢出不会清除元素处的浮动，它会 自动清除。这意味着应用了溢出（自动或隐藏）的元素将根据需要扩展到包含浮动的子元素（而不是折叠），假设没有声明高度。