使用 display: flow-root 触发 bfc 可彻底解决 margin 塌陷，父元素仍正常参与文档流且无副作用；也可用 padding-top 或 border-top 打断塌陷条件。
子元素 margin-top 导致父容器上边距消失怎么办
这是典型的 margin 塌陷（margin collapsing）现象：当父元素没设置 border、padding、inline content 或触发 BFC 时，第一个子元素的 margin-top 会“穿透”到父元素外边距位置，看起来像父容器被顶开了，实际是 margin 合并了。
解决思路不是“阻止塌陷”，而是打断塌陷发生的条件。关键在父元素自身状态，和子元素 margin 无关。
- 给父元素加
padding-top: 1px（哪怕 0.1px 也行），最轻量且兼容性好 - 加
border-top: 1px solid transparent，不影响视觉，但能隔离 margin - 避免只靠
overflow: hidden—— 它虽能触发 BFC，但可能意外裁剪position: absolute子元素或阴影 -
display: flow-root是现代首选，语义清晰、无副作用，Chrome 64+/Firefox 57+ 支持
用 display: flow-root 触发 BFC 最干净
display: flow-root 是专为解决这类问题设计的值，它创建一个块级格式化上下文（BFC），同时不改变布局行为（不像 float 或 absolute 那样脱离文档流）。
对比其他 BFC 触发方式：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
下载
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
overflow: hidden：容易隐藏溢出内容，比如下拉菜单、tooltip -
float: left：父元素高度坍缩，需额外清除浮动 -
position: absolute：完全脱离文档流，不再作为布局容器使用 -
display: flow-root：无副作用，父元素仍正常参与文档流，高度自动包裹子元素
示例：
.parent { display: flow-root; }
.child { margin-top: 20px; }此时 .child 的 margin-top 不再与父元素外边距合并。
为什么 padding-top 比 border-top 更推荐
两者都能打断 margin 塌陷，但行为细节不同：
-
padding-top会撑开父元素高度，但通常这正是你想要的效果（比如留白） -
border-top虽不增加内容高度，但会参与盒模型计算；若父元素设置了box-sizing: border-box，border 会压缩内容区宽度/高度 - 透明边框在某些旧版 Android WebView 中有渲染异常，而
padding兼容性更稳 - 如果父元素已有
padding或border，说明塌陷本就不会发生——检查是否误加了margin到错误元素上
别忘了检查是否真需要防塌陷
很多场景下，margin 塌陷其实是 CSS 的合理默认行为，比如段落 p 之间自然的垂直间距。强行阻止可能破坏设计一致性。
- 先确认：是不是把
margin-top错加给了第一个子元素？其实该由父容器统一控制顶部间距 - 用浏览器开发者工具的盒模型面板看清楚：是父元素“没高度”，还是 margin 真的跑到了外面
- Flex/Grid 容器天然不发生 margin 塌陷，如果布局允许，直接改用
display: flex或display: grid更一劳永逸
真正要警惕的是嵌套结构中反复叠加的 margin 塌陷，比如多层 div 都依赖首子元素 margin，最终导致不可控的空白。这时候才需要明确打断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
