为何为form设置overflow:hidden未裁剪溢出按钮反而被撑大？

这是个很常见的CSS细节疑惑，我来帮你拆解清楚背后的逻辑：

1. overflow:hidden的核心生效条件 #

你提到的“overflow属性仅对指定了高度的块级元素生效”是关键，但更准确的说法是：overflow的裁剪效果，只有当元素的高度不是由内部内容自动撑开的时候才会触发。

当你不给<form>设置height/min-height/max-height时，它的高度默认是auto——浏览器会自动计算内部所有内容的总高度来撑大父元素，这时候哪怕有内容看起来“溢出”，父元素也会跟着调整高度，自然没有东西可裁剪。

2. 浮动元素+BFC的双重影响 #

你的按钮用了float: right，浮动元素会脱离正常的文档流。在你没加overflow:hidden之前，<form>作为普通块级元素，默认不会把浮动元素的高度计算进自身高度里，所以按钮会超出<form>的底部（看起来像是溢出）。

但当你给<form>加上overflow:hidden后，它触发了BFC（块级格式化上下文）——BFC的核心特性之一就是会包含内部的浮动元素，浏览器会重新计算<form>的高度，把浮动按钮的高度也纳入其中，所以<form>会被自动撑大到能容纳所有内容的高度，按钮不再溢出，自然看不到裁剪效果。

3. 如何实现你预期的裁剪效果 #

如果想要让overflow:hidden裁剪溢出的按钮，你需要给<form>设置一个明确的高度限制，比如固定高度或者最大高度：

<section style='max-width: 300px; padding: 10px; background-color: beige'>
<form style='background-color: blue; overflow: hidden; height: 160px'>
<input type='text' style='width:100%'>
<textarea style='width: 100%'></textarea>
<button type='submit' style='float: right'>send</button>
</form>
<hr>
</section>

这样当内部内容（包括按钮）的总高度超过160px时，超出的部分就会被overflow:hidden裁剪隐藏。

内容的提问来源于stack exchange，提问作者Mark Messa