浮动元素的margin-top/margin-bottom并非失效，而是因脱离文档流，不再与非浮动兄弟元素构成垂直相邻关系，其margin仅作用于包含块边缘或相邻浮动元素；根本原因是父容器塌陷导致子元素margin失去作用对象，应改用BFC包裹或Flex/Grid布局替代。
浮动元素的上下 margin 看似失效，其实是它根本没参与常规的垂直间距计算——别调 margin，先确认你是不是在用 float 做布局。
为什么浮动元素的 margin-top/margin-bottom 不起作用
浮动元素脱离文档流后，不再和兄弟块级元素构成垂直相邻关系，因此它们的 margin-top 和 margin-bottom 不会与前后非浮动元素发生作用。常见现象包括：
- 一个
float: left的卡片设了margin-bottom: 20px，但后面紧接的<p>文字却紧贴其底部 - 两个并排浮动的
<div>，上面那个加margin-bottom，下面那个加margin-top，结果间距毫无变化 - 开发者工具里能看到
margin值已生效，但 computed height 却没撑开父容器
根本原因不是样式没写对，而是父容器因浮动塌陷、高度为 0，子元素的 margin-bottom 失去了作用对象。
浮动元素之间垂直间距该用什么控制
浮动元素之间的垂直距离，本质上由它们在浮动方向上的“排列顺序”和“容器包裹能力”决定，而不是靠 margin 拉开。实际能起效的只有：
立即学习“前端免费学习笔记（深入）”；
- 给父容器触发 BFC（如
overflow: hidden或display: flow-root），让容器能感知浮动项真实高度，此时子项的margin-bottom才能撑开父容器 - 在浮动项下方插入一个
clear: both元素，并确保它不参与 margin 合并（例如设height: 0; line-height: 0; font-size: 0;） - 改用
padding-bottom在父容器上统一留白，绕过 margin 合并问题
注意：margin-top 对第一个浮动项几乎无效；margin-bottom 对最后一个浮动项也常被忽略——因为后续非浮动内容不把它当“前一个兄弟”。
现代项目里更推荐的替代方案
用 float 控制垂直间距是反模式。真正稳定可控的方式是换布局模型：
- 并排 + 自适应高度 →
display: flex+gap: 16px（gap同时控制水平和垂直间距） - 网格化结构 →
display: grid+row-gap: 16px（支持独立设置行列间距） - 必须兼容 IE11？用
flex+margin-bottom组合，但只给除最后一项外的所有子项设margin-bottom，并配合:not(:last-child)
Flex/Grid 下，所有子项都在文档流中参与尺寸计算，margin 行为可预测，无需反复调试清除浮动或 BFC 触发方式。
最容易被忽略的一点
浮动元素的 margin 从来就没“失效”，只是它的作用对象变了：它推的是包含块边缘或相邻浮动元素，而不是你眼睛看到的“下一个文字段落”。如果你还在用普通流的思维去 inspect 和调整，就会陷入不断加 overflow、删空格、调 vertical-align 的循环——真正该动的，是布局逻辑本身。
