浮动列表项的 margin-bottom 不生效是因为父容器塌陷，需用 display: flow-root 等清除浮动；flex 布局可彻底规避该问题，推荐优先使用。
浮动列表项的 margin-bottom 不生效？先看父容器有没有清除浮动
浮动元素脱离文档流，margin-bottom 看似写了，实际不占位、不推其他内容——不是你写错了，是父容器塌陷了。常见现象：列表项之间没间距，最后一项紧贴下边内容，打印或截图时布局错乱。
- 必须给父
<ul></ul>或包裹容器加清除浮动，比如overflow: hidden、display: flow-root（推荐），或伪元素::after清除 -
display: flow-root是最干净的解法，兼容性到 Chrome 58+/Firefox 53+，比overflow: hidden更安全（不会意外裁剪阴影或定位元素） - 别用
float: left+margin-bottom想控制行间距——浮动本身不参与块级垂直对齐，margin-bottom只影响后续文档流元素，对同级浮动项无效
想让每行最后一个浮动项不带 margin-bottom？用 nth-child 配合 float 方向判断
横向浮动列表（如 float: left）每行末尾项如果也加 margin-bottom，会导致行与行之间间距翻倍。这不是 bug，是 CSS 盒模型叠加的自然结果。
- 假设每行显示 4 项，可用
li:nth-child(4n) { margin-bottom: 0; }去掉每行最后一项的底边距 - 但要注意：这个选择器依赖固定列数，响应式换行后失效；真要适配多断点，得配合媒体查询重置
n值 - 更稳的替代方案是改用
display: inline-block或直接上flex，但若必须保浮动（如兼容 IE8），就老实用nth-child+ 列数预设
IE8 下 margin-bottom 被吃掉？检查是否触发了 hasLayout
IE8 及更早版本对浮动元素的 margin 渲染有缺陷：当父容器没触发 hasLayout，子项的 margin-bottom 可能被忽略或合并。
- 给父容器加
zoom: 1或height: 1%强制触发hasLayout，这是最常用且有效的补丁 - 避免同时设置
margin-bottom和padding-bottom在同一浮动项上——IE8 容易误算盒高，导致视觉错位 - 如果用了
display: inline-block降级方案，注意 IE8 默认不支持该值在非替换元素上的表现，需额外 hack
用 flex 替代 float 后，margin-bottom 还需要吗？
不用了。Flex 布局天然规避了浮动塌陷问题，margin-bottom 能正常生效，且可通过 gap 统一控制项间距离，更可控。
-
gap会自动处理行列间距，比手动写margin-bottom+ 清除逻辑简洁得多 - 若需兼容旧浏览器，别用
gap回退到margin，而应统一用margin+:not(:last-child)控制（如li:not(:last-child) { margin-bottom: 12px; }） - 注意：Flex 容器的
flex-wrap: wrap下，margin-bottom对最后一行末尾项依然有效，不会像浮动那样“消失”
浮动 + margin-bottom 的坑，本质是文档流脱离后的空间归属模糊。真正难的不是写对那行样式，而是判断此刻该由谁来负责“撑开空间”——父容器？伪元素？还是干脆换个布局模型。选哪个，取决于你手上那个不能动的 IE8，还是那个明天就要上线的响应式需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
