浮动元素的 margin 并非失效，而是父容器高度塌陷导致视觉错觉；解决方法是让父容器触发 BFC，推荐使用 display: flow-root。
浮动元素的 margin 不生效？先确认是不是塌陷了
浮动元素本身不会触发外边距合并（margin collapse），但你看到的“margin 失效”，大概率是父容器高度塌陷导致的视觉错觉——子元素浮起来了，父容器却缩成一条线，margin 看似没起作用，其实是挂在“悬空”的元素上，下面没内容承接它。
常见错误现象：
- 给浮动的 div 设置 margin-bottom: 20px，但下方兄弟元素紧贴着它顶部出现
- 父容器背景色/边框突然消失，检查发现高度为 0
- 在 Chrome DevTools 中看到 margin 值正常高亮，但布局毫无反应
BFC 是什么？为什么它能“兜住”浮动和 margin
BFC（Block Formatting Context）是一个独立的渲染区域，内部的布局不会影响外部，且会包含内部浮动元素的高度。一旦父容器形成 BFC，它就能“感知”到浮动子元素的存在，从而正确计算自身高度，让子元素的 margin 有落脚点。
触发 BFC 的常用方式（选一个即可）：
- overflow 值不为 visible（如 hidden、auto）
- display 为 flow-root（推荐，语义清晰，无副作用）
- float 值不为 none（不推荐，本身就在处理浮动）
- position 为 absolute 或 fixed（会脱离文档流，慎用）
性能与兼容性注意：
- overflow: hidden 最老，兼容性好，但可能意外裁剪阴影或下拉菜单
- display: flow-root 是现代解法，IE 不支持，但 Chrome/Firefox/Edge 90+ 都稳，无副作用
别硬清浮动，优先用 display: flow-root
过去常用 clearfix 伪类或空 div 清浮动，本质是靠生成 BFC 或触发 layout，但写法冗余、语义弱。现在直接让父容器自己成为 BFC 更干净。
实操建议：
- 把浮动子元素的直接父容器样式从 overflow: visible 改为 display: flow-root
- 如果需要兼容 IE，退而求其次用 overflow: hidden，但务必检查是否遮挡 box-shadow 或 position: absolute 子元素
- 不要用 zoom: 1 或 *+html 这类 IE 专有 hack，已无必要
示例：
.container {
display: flow-root; /* 关键：一句话建立 BFC */
}
.float-item {
float: left;
margin-right: 16px;
}
margin 失效还有别的可能？别只盯着浮动
如果加了 display: flow-root 还是没反应，问题可能不在浮动本身：
立即学习“前端免费学习笔记（深入）”；
排查要点：
- 检查是否误用了 margin 在行内元素（如 span）上——行内元素垂直方向 margin 无效
- 确认没有父级设置了 font-size: 0 或 line-height: 0，这会让行内块级浮动元素的基线对齐异常，间接影响间距表现
- 查看是否有 CSS 重置库（如 normalize.css）把 body 或 ul 的 margin 设为 0，造成全局“没间距”错觉
- 浏览器默认样式中，h1~h6、p、ul 自带 margin，若被重置又没补回，也会显得“margin 失效”
真正容易被忽略的是：BFC 解决的是**容器包裹问题**，不是万能 margin 修复开关。浮动元素自身的 margin 一直有效，只是你常常没给它留出可生效的空间。
