margin-bottom失效主因是bfc截断或外边距塌陷：bfc容器中其不参与布局；无border/padding的父容器中会与父margin合并塌陷；flex容器中应改用gap；浮动后元素margin可能被忽略。
它不是“无效”，而是被BFC截断或被外边距塌陷吃掉了——绝大多数情况，margin-bottom 值本身在 computed 样式里依然存在，只是不参与布局计算。
父容器触发了BFC导致margin-bottom被截断
当父元素设置了 overflow: auto、overflow: hidden、display: flow-root 或 position: absolute 等属性时，它就创建了一个 BFC。此时，最后一个子元素的 margin-bottom 不会撑开父容器高度，也不会延伸到父容器外部，视觉上就像“消失”了。
- iOS Safari 和微信内置浏览器对此行为尤其严格，哪怕
margin-bottom: 20px在 DevTools 的 Styles 面板里显示正常，Computed 面板中该值可能标为collapsed - 常见于
<scroll-view></scroll-view>（uni-app）、<div style="overflow:auto"> 包裹列表、React Native WebView 内嵌 H5 场景 <li>解决方式不是删掉 margin，而是换用 <code>padding-bottom：给父容器加padding-bottom: 20px，效果等价且稳定 - 典型表现：父容器高度看起来“不够”，底部紧贴下一个兄弟元素，但检查子元素 computed
margin-bottom却是预期值 - 验证方法：选中父容器，在 DevTools 中看 computed
height是否等于子元素实际高度（不含 margin） - 快速修复：给父容器加
padding-bottom: 1px或border-bottom: 1px solid transparent，即可阻断塌陷 - 更合理的做法是统一用
gap控制子项间距：.container { gap: 16px; }，它天然避开最后一个元素的 margin 问题 - 如果必须用 margin（比如兼容老浏览器），记得重置最后一个：
.item:last-child { margin-bottom: 0; } - 注意
align-items: stretch可能拉伸子元素覆盖 margin，建议显式设align-items: flex-start - 现象：DevTools 显示
margin-bottom计算值正常，但元素紧贴下方内容，毫无间距 - 根本原因不是 float 本身，而是 float 后未创建 BFC，导致后续块级元素的 margin 与前面发生合并
- 推荐解法：不用
clear: both，改用display: flow-root包裹浮动组；或直接放弃 float，改用display: inline-block或 Flex 布局
最后一个子元素的margin-bottom引发外边距塌陷
当父容器没有 border、padding 或内容撑高，且最后一个子元素设置了 margin-bottom，这个 margin 会和父容器自身的 margin 合并（塌陷），直接“穿透”到父容器外部，导致底部空白不可见。
Flex容器中给最后一个子元素设margin-bottom是反模式
在 display: flex; flex-direction: column 容器里，给 .item:last-child 设 margin-bottom 多数时候是多余甚至有害的——它会在容器底部额外空出一段无意义间隙，滚动到底部时容易误触，卡片类布局中还会造成视觉断裂。
浮动元素后紧跟的元素margin-bottom被忽略
只要前一个元素用了 float: left 或 float: right，它后面的兄弟元素即使写了 margin-bottom: 20px，在 iOS Safari、微信 iOS 内核等环境下也可能完全不渲染空白——这是 IE6/7 的遗留 bug 在现代 WebView 中的复现。
真正难处理的从来不是怎么加 margin，而是判断当前上下文是否允许它生效——BFC 状态、塌陷链路、容器类型、渲染内核差异，这些细节稍有遗漏，margin-bottom 就会静默失效，连报错都不会有。
