overflow:hidden不生效，因父容器若为flex/grid已自带BFC、或存在transform/filter/will-change干扰BFC触发，或被!important覆盖；应改用display:flow-root。
为什么父容器加 overflow: hidden 有时不生效？
它确实能阻止子元素的 margin-top 向上传播，但前提是父容器必须处于普通文档流、未被 position: absolute / transform 提升为包含块，且没有 !important 覆盖其计算值。更隐蔽的失效原因是：父容器本身是 display: flex 或 display: grid —— 这类容器天然已是 BFC，overflow: hidden 不再触发新 BFC，也就不影响 margin 塌陷行为。
- 检查父容器是否用了
display: flex/grid：此时加overflow: hidden是冗余的，应换用display: flow-root - 确认父容器没有
transform、filter或will-change：这些会创建新的层叠上下文和包含块，可能干扰 BFC 的边界判定 - 避免在父容器上写
overflow: hidden !important：强制裁剪会掩盖真实问题，且可能意外截断下拉菜单、阴影或伪元素
display: flow-root 是什么，为什么比 overflow: hidden 更可靠？
display: flow-root 是 CSS Display Level 3 中专为创建 BFC 设计的值，语义明确、无副作用。它不改变滚动行为，也不影响 clip-path 或 mask 渲染边界，唯一作用就是让容器成为独立布局上下文——正好用来隔离父子 margin。
- 兼容性已足够好：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+ 都支持；旧版 Safari 可用
display: table回退 - 写法干净：
.parent { display: flow-root; }，无需担心是否误裁内容 - 与 Flex/Grid 共存安全：即使父容器是
flex，给某个子容器设flow-root仍可让它内部形成独立 BFC，用于局部控制塌陷
双重盒子结构具体怎么套？关键在“谁包谁”
所谓双重盒子，不是随便嵌两层 <div>，而是有明确分工：外层负责创建 BFC（防穿透），内层负责承载内容并控制留白。常见错误是把 <code>margin-bottom 留给最后一个子元素，结果在 BFC 内被“收容”，父容器高度不撑开。
- 正确结构：
<div class="bfc-wrapper"><div class="content">...</div></div> - 外层
.bfc-wrapper设display: flow-root（或overflow: hidden） - 内层
.content的margin-bottom改为外层的padding-bottom：空隙属于容器，而非内容延伸 - 若需动态控制间距，用 CSS 自定义属性：
.bfc-wrapper { padding-bottom: var(--gap, 1rem); }
兄弟元素间突然出现额外空白，是不是双重盒子惹的祸？
是。当你只修复了父子塌陷（比如给每个卡片加 flow-root），却没统一兄弟元素的间距逻辑，就容易暴露原本被隐藏的兄弟级 margin 合并。比如两个相邻卡片都设了 margin-bottom: 1rem，它们之间实际只有 1rem 间距，而不是预期的 2rem。
立即学习“前端免费学习笔记（深入）”；
- 根本解法不是堆 BFC，而是约定规范：所有垂直间距由
margin-bottom单向控制，最后一个元素设margin-bottom: 0 - 用
:not(:last-child)批量处理：.card:not(:last-child) { margin-bottom: 1rem; } - 如果卡片本身是
flow-root，它的margin-bottom不会和下一个卡片合并——这时反而要靠父容器统一管理间隙，比如用gap（Flex/Grid）或margin在卡片外层
flow-root 加一处 padding 就够了。
