:last-child 在浮动布局中“选对了但没用对”，因其按 DOM 顺序选择末项，而浮动导致视觉顺序与 DOM 顺序脱节；亚像素误差、box-sizing 和缩放会加剧换行，使末项错位；应改用 flex/grid 或 :nth-child(4n) 等方案。
为什么 :last-child 在浮动布局里“选对了但没用对”
它确实命中了 DOM 中最后一个子元素，但浮动布局下，这个元素的视觉位置可能根本不在“最后一行末尾”——比如父容器宽度刚好卡在换行临界点，:last-child 元素被挤到了第二行中间，而第一行真正的末尾元素反而没被选中。这不是选择器失效，是布局本身让“DOM 顺序”和“视觉顺序”脱节了。
浮动 + 百分比宽度 + 缩放 = :last-child 失效高发场景
当父容器设了 width: 100%、子项用 float: left + width: 25% 排四列时，缩放会放大亚像素误差。浏览器四舍五入后，某几列实际占宽变成 25.02% 或 24.98%，总宽超 100%，导致最后一项被换行。此时 .item:last-child 仍只作用于 DOM 最后一个，但视觉上它已不在行尾，右侧间距残留或错位就出现了。
-
box-sizing: content-box是隐形推手：padding/border 没被算进 width，实际总宽悄悄超标 - 父容器若设了
overflow: hidden或transform，会干扰 BFC，进一步加剧换行判断偏差 - 开发者工具里看 Computed width，常发现“50%”实际渲染为
375.3px → 375px，差那 0.3px 就够触发换行
不改布局的前提下，怎么让 :last-child 真正管用
必须把“视觉末尾”和“DOM 末尾”强行对齐，核心是堵死换行可能：
- 给所有浮动子项加
box-sizing: border-box，并确保父容器也设了（否则父容器 padding 会吃掉可用宽度） - 用
calc()替代纯百分比：例如四列带 1px 边框和 8px 水平 margin，写成width: calc(25% - 2px - 16px) - 避免
width: 99.9%这类临界值写法——小数部分在缩放下四舍五入更不可控 - 如果必须保留浮动，且列数固定，优先用
:nth-child(4n)替代:last-child，它能稳定匹配每行末尾
真正该放弃 :last-child 的时候
当列数响应式变化（比如从 4 列切到 3 列），:nth-child(4n) 和 :last-child 都会失效——CSS 伪类无法感知换行逻辑。这时候硬调样式只会增加维护成本。直接换 display: flex + gap，或者 display: grid，:last-child 的问题就从“怎么修”变成了“不需要修”。
立即学习“前端免费学习笔记（深入）”；
浮动布局里处理末尾间距，本质是在给过时模型打补丁。最易被忽略的点是：你花一小时调 :last-child，不如十分钟把父容器改成 display: flow-root，再加一行 gap —— 错位没了，代码还少了三行。
