浮动元素末尾塌陷的根源是父容器高度塌陷，而非单纯外边距问题；应优先用 clearfix、overflow:hidden 或改用 flex/grid 布局来治本，calc() 和 :nth-child 仅属临时补救。
浮动元素最后一行塌陷的典型表现
页面末尾几个 float: left 的盒子，明明宽度加起来没超父容器，最后一个却掉到下一行——不是因为内容撑开，而是父容器没“感知”到浮动子元素的高度，同时末尾元素可能被前面元素的 margin-right 或自身 margin-left 推出可视区域。
用 calc() 动态抵消多余外边距
当一组等宽浮动项（比如 4 个 25% 宽度）靠 margin-right 实现间隙时，最后一个元素不该有右外边距，但 CSS 没法“选中最后一个浮动子元素并清 margin”，硬写 :last-child { margin-right: 0 } 又容易误伤（比如后面跟了其他非浮动元素）。这时候用 calc() 把间隙“摊进宽度里”更稳：
li {
float: left;
width: calc(25% - 12px); /* 12px 是期望的横向间隙 */
margin-right: 12px;
}
li:nth-child(4n) {
margin-right: 0; /* 明确控制每行第 4 个不带右间距 */
}
注意：这里 nth-child(4n) 要和实际每行数量对齐；如果响应式断点会变列数，就得配合媒体查询重置 width 和 nth-child 的逻辑。
清除浮动本身比“救末尾元素”更治本
执着于“不让最后一个掉行”，其实是把问题想窄了。真正的问题是父容器高度塌陷，导致后续元素上浮、布局错乱。与其在末尾元素上打补丁，不如让父容器正确包裹所有浮动子项：
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
overflow: hidden（简单但可能截断阴影或定位元素） - 用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }然后给父容器加class="clearfix" - 现代方案直接换
display: flex或display: grid——浮动本就不该用于布局，只是历史遗留
为什么取消末尾 margin 容易失效
很多人试过 :last-child { margin-right: 0 } 却没用，常见原因有三个：
- HTML 结构里末尾元素后面还有空格、换行符或注释，导致它根本不是
:last-child（DOM 中文本节点也算子节点） - 浮动元素是
inline级标签（如span），而:last-child匹配的是元素节点，不区分显示类型 - 用了
float: right，那真正需要清 margin 的其实是第一个元素，不是最后一个
查 DOM 结构比猜选择器更可靠：打开开发者工具，看目标元素在父容器子节点列表里的真实位置。
浮动布局的坑不在“怎么卡住最后一个”，而在“为什么还在用浮动做整体布局”。calc() 和 :nth-child 能临时止血，但父容器高度塌陷、文字环绕、响应式断裂这些病根，得靠换布局模型来治。
