margin-bottom在scroll-view或overflow:auto容器中失效，根本原因是BFC截断外边距且存在外边距塌陷；解决方案是用padding-bottom替代或调整容器高度预留空间。
scroll-view 或 overflow:auto 容器里 margin-bottom 失效
这是最典型的触发场景：在 uniapp 的 <scroll-view></scroll-view>、Vue 项目中用 overflow: auto 包裹列表、或 React Native WebView 内嵌 H5 页面时，末尾元素加了 margin-bottom，但底部空白完全不出现。
根本原因不是样式没写对，而是父容器创建了 BFC（块级格式化上下文），而 BFC 会「截断」最后一个子元素的 margin-bottom —— 它不会撑开父容器高度，也不会影响外部布局，视觉上就像被“吃掉”了。
- 只要父容器有
overflow: auto | hidden | scroll，或display: flow-root、float、position: absolute/fixed，就大概率触发 BFC -
margin-bottom本身仍存在（开发者工具里能看到计算值），但它不再参与外边距计算流程 - 尤其在 iOS Safari、微信内置浏览器中更明显，因为它们对 BFC 边距处理更严格
margin 折叠导致底部空白消失
两个垂直相邻的块级元素，比如 <div class="item"></div>
<div class="empty">到底了</div>，如果前者有 margin-bottom: 20px，后者有 margin-top: 10px，实际间距只会是 20px（取较大值），而不是 30px。更隐蔽的是：当 .empty 是父容器最后一个子元素，且父容器没设置 padding-bottom 或 border-bottom，它的 margin-bottom 会和父容器的 margin 合并（外边距塌陷），直接“穿透”出去。
- 常见于无内容空
<div>、<code>font-size: 0或line-height: 0的提示文字容器 - 检查 computed 样式里
margin-bottom是否显示为 “collapsed”，而不是具体数值 - 用
border-bottom: 1px solid transparent或padding-bottom: 1px可立即阻止折叠 - 现象：浮动元素之后的元素，
margin-bottom值在 DevTools 中显示正常，但渲染无空白 - 不是所有浏览器都修复了该行为，iOS 下尤其顽固
- 替代方案优先用
display: inline-block或flex布局，避免float；若必须用，给父容器加overflow: hidden或display: flow-root - 根本问题：父容器高度固定，子元素 + margin 超出后被裁剪，不是 margin 失效，而是被隐藏了
- uniapp 中常见于
scroll-view高度用了calc(100vh - 85rpx)，但没预留margin-bottom空间 - 解决方式不是删 margin，而是把这部分空间“算进去”：
height: calc(100vh - 85rpx - 50rpx)（假设 margin-bottom 是 50rpx） - 更健壮的做法是：用
padding-bottom替代margin-bottom，因为 padding 属于盒模型内部尺寸，不会被裁剪
浮动元素（float）后 margin-bottom 被忽略
哪怕只对一个按钮或图标加了 float: left，它后面的兄弟元素若设置了 margin-bottom，在旧版 Safari、微信 iOS 内核、甚至部分 Android WebView 中可能完全不生效 —— 这是 IE6/7 遗留 bug 的现代复现。
移动端适配中 body 或 viewport 高度限制引发失效
很多 H5 页面设了 body { height: 100vh; }，再在底部加一个 margin-bottom: 40px 的提示框，结果整个页面被截断，提示框被“推”出视口下方，用户根本看不到。
真正难排查的，往往是 BFC 和 margin 折叠叠加出现：比如一个 overflow: auto 的滚动区里，末尾元素既浮动又没清除，还处在无内容塌陷边缘 —— 这时候单改一个属性很难见效，得同时处理容器格式化上下文和子元素边界行为。
