overflow: hidden 不改变盒模型尺寸计算，仅裁剪 content box 内容并触发 BFC；BFC 导致父容器包裹浮动、阻止外边距合并、避开浮动元素，引发布局变化而非尺寸变化。
overflow: hidden 本身不改变盒模型尺寸计算方式
设置 overflow: hidden 不会修改元素的 width、height、padding、border 或 margin，它只作用于内容渲染阶段：超出 content box 边界的子元素（包括浮动、绝对定位、文本溢出等）会被视觉裁剪。盒模型的尺寸仍按标准 CSS 盒模型规则计算，不受该声明影响。
但它会触发 BFC，间接影响布局行为
这是最容易被忽略的关键点：overflow: hidden（只要值不是 visible）会使元素成为块级格式化上下文（BFC）容器。BFC 会带来以下实际影响：
- 内部浮动子元素不会导致父元素高度塌陷 —— 即使没有清除浮动，父元素也能正确包裹浮动子项
- 避免外边距合并（margin collapse），例如父子或相邻兄弟元素之间的
margin-top/margin-bottom不再合并 - 不会与 float 元素重叠 —— BFC 区域会避开浮动区域，表现为“自适应绕行”后的重新排布
这些不是“盒模型变大/变小”，而是布局上下文变更引发的渲染结果变化，常被误认为“尺寸变了”。
内容裁剪边界严格以 content box 为基准
裁剪发生在 content box 的边缘，而非 padding box 或 border box。这意味着：
立即学习“前端免费学习笔记（深入）”；
- 如果设置了
padding，内容从 padding 内侧开始被裁剪，padding 区域依然可见且占空间 -
border和padding不受裁剪影响，但超出 content 区域的内容（比如一个width: 200px的子div放在width: 100px的父容器中）会在 content 边界处被切掉 - 使用
transform或position: absolute偏移的元素，只要其**渲染框的 content 部分**越界，就会被裁剪（注意：fixed 定位元素脱离文档流，通常不受父级overflow影响）
常见误判场景与验证方法
遇到“加了 overflow: hidden 后高度/位置变了”，大概率是 BFC 触发导致的布局重排，而非尺寸属性被修改。可这样快速验证：
- 用浏览器开发者工具检查元素 computed 样式中的
height和width，确认是否真有变化 - 临时替换为
overflow: clip（现代浏览器支持），它同样裁剪但不创建 BFC，对比布局差异 - 把
overflow: hidden换成overflow: auto，看滚动条是否出现 —— 若无滚动条且表现一致，说明裁剪生效但未触发额外布局干预 - 对浮动子元素单独测试：移除
overflow: hidden后父元素高度是否塌陷？若是，则是 BFC 在起作用，不是盒模型被改写
BFC 是隐式副作用，而盒模型计算是显式规则。混淆这两者，是调试时反复兜圈子的根源。
