这不是bug，是css外边距折叠规范行为：子元素margin-top因父容器无border/padding/bfc而与其上边界合并，导致父容器整体下移；推荐用display:flow-root触发bfc根治，现代浏览器兼容且无裁剪副作用。
为什么子元素margin-top设了却没效果？
这不是 bug，是浏览器在执行规范：当父容器没有 border、padding、内容或 BFC 隔离时，子元素的 margin-top 会“穿出去”，和父容器自身的上边距合并——结果是整个父容器下移，而不是子元素在内部下移。
常见表现：.main-container 里第一个子元素设了 margin-top: 20px，但页面上看不到空白，反而整个区块位置偏移了。
- 检查父容器是否为空（无文字、无
padding、无border） - 用开发者工具看 computed styles，确认父容器的
margin-top是否被子元素“贡献”了值 - 注意：这种穿透只发生在垂直方向，
margin-left/margin-right永远不折叠
用 display: flow-root 触发 BFC 最稳妥
这是现代标准解法，语义明确、无副作用，且不裁剪溢出内容（不像 overflow: hidden）。
只需给父容器加一行：
.parent {
display: flow-root;
}
- Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+ 全支持
- 比
overflow: hidden更安全：不会隐藏position: absolute子元素、阴影或下拉菜单 - 如果项目需兼容 IE11，才考虑降级方案（如透明边框）
加 border-top: 1px solid transparent 是轻量 fallback
当必须支持老浏览器，或只想最小改动时，这个技巧依然可靠。
它生效的关键不是颜色，而是「非零边框」本身打破了折叠条件：
.parent {
border-top: 1px solid transparent;
}
- 比
padding-top: 1px更轻量：不影响盒尺寸计算（尤其box-sizing: border-box下） - 别写
border: 0或border: none——它们不触发隔离 - 若父容器已有
border却仍折叠，说明样式被 reset.css 清掉，需检查 computed styles
兄弟元素间 margin 折叠怎么破？
两个相邻 <div> 的 <code>margin-bottom 和 margin-top 合并，导致间距小于预期（比如 20px + 30px → 实际 30px）。
- 优先用
gap替代：父容器设display: flex; flex-direction: column;，再加gap: 20px——gap不参与折叠，且更可控 - 统一只设一个方向：例如所有项只用
margin-bottom，末尾用:last-child { margin-bottom: 0; } - 避免给两者都设 margin：这不是错误，而是排版设计习惯；强行阻止反而可能破坏段落流语义
真正容易被忽略的，是父子折叠带来的“静默位移”——它不产生可见空白，却让整块布局错位。调 margin 前，先看父容器有没有 padding 或 border，比反复试数值更高效。
