浮动元素的 margin-bottom 失效是因为它脱离文档流，不参与外边距合并且不影响后续非浮动块的位置；清除浮动仅防塌陷，不自动产生子项间距；现代推荐用 flex/gap 或 grid/row-gap 替代。
浮动元素的 margin-bottom 为什么失效
因为浮动元素脱离了普通文档流，后续兄弟块级元素会“无视”它的存在，导致看似设置了 margin-bottom 却没空隙。常见于两个并排 float: left 的 div，下面那个明明写了 margin-top: 20px，但实际紧贴着上面那个。
- 这不是 bug，是 CSS 规范定义的行为：浮动元素的 margin 不参与相邻块级元素的外边距合并（margin collapse），也不影响后续非浮动块的位置计算
- 典型场景：用浮动实现两栏布局，右侧栏顶部卡在左侧栏中间位置；或浮动卡片列表中卡片之间没有垂直间隔
- 别试图靠给浮动元素加
padding或border来“撑开”间距——这只会让内容区域变形，不解决布局逻辑问题
清除浮动后仍没空隙？检查父容器是否塌陷
如果给浮动元素的父容器加了 clear: both 或伪元素清除，但子元素之间还是没垂直间距，大概率是父容器高度塌陷导致视觉错觉——它根本没包裹住浮动子项，下面的元素自然从顶部开始排布。
- 验证方式：给父容器加临时
background: red，看是否显示为一条细线甚至不可见 - 清除浮动只是让父容器“感知”到子项存在，但不会自动给子项之间加间距；你得单独控制子项的
margin或用其他布局方式隔离它们 - 现代写法优先用
display: flow-root替代传统清除，它既能防止塌陷，又比overflow: hidden更安全（不意外裁剪阴影或下拉菜单）
更可靠的替代方案：用 flex 或 grid 控制间距
浮动本就不是为复杂间距控制设计的。如果你需要稳定、可预测的垂直/水平间隙，直接换布局模型更省事。
-
display: flex下，用gap属性一步到位：gap: 16px同时作用于行与列，且完全避开浮动相关所有坑 - 若需兼容老浏览器（IE11），可用
margin+:not(:last-child)组合：.item:not(:last-child) { margin-bottom: 16px; }，但注意浮动本身会让这个选择器失效，必须先解决浮动问题 - grid 布局中，
row-gap和column-gap独立可控，且不受浮动干扰——前提是容器没同时设float
真要用浮动？那就只对齐，别指望它管间距
如果项目受限必须用浮动（比如维护老代码），记住一个铁律：浮动只负责“贴边”，所有间距都得由非浮动上下文承担。
立即学习“前端免费学习笔记（深入）”；
- 给每个浮动元素单独设置
margin-bottom，但要意识到：这个 margin 只对后续**非浮动**兄弟元素起作用；两个浮动元素之间不会产生垂直距离 - 想让两个浮动元素有垂直空隙？只能把它们包进不同容器，再给这些容器设 margin；或者用
position: relative+top微调（不推荐，难维护） - 绝对不要在浮动元素上用
vertical-align想调整垂直对齐——它对块级浮动元素无效，只会让你多花半小时查 MDN
