html - 为什么收缩以适应溢出 : hidden work on input elements? 的行为

Question

this question 的答案是“将输入包装在一个范围内，并将 overflow: hidden 应用于该范围。”

这是可行的，因为它为跨度 making room for the floats 建立了一个新的 block 格式化上下文.

为什么将 overflow: hidden 直接应用于输入 not work ？为什么需要将输入包装在一个跨度中？

Answer 1

float 旁边的 block 格式化上下文的行为没有完全指定。 From CSS2.1 (强调):

The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats, but may place it adjacent to such floats if there is sufficient space. They may even make the border box of said element narrower than defined by section 10.3.3. CSS2 does not define when a UA may put said element next to the float or by how much said element may become narrower.

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

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