:last-child在浮动布局中“选对了但没用对”，因其按dom顺序匹配而非视觉顺序，浮动+百分比宽度+缩放易致亚像素误差引发换行，使:last-child元素脱离视觉末尾；应改用calc()、nth-child或直接切换为flex/grid布局。
为什么: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 末尾”强行对齐，核心是堵死换行可能：
- 用
calc()替代纯百分比：例如四列带 1px 边框和 8px 水平 margin，写成width: calc(25% - 2px - 16px) - 避免这类临界值写法——小数部分在缩放下四舍五入更不可控
- 改用
:nth-child(4n)等能稳定匹配每行末尾的选择器（前提是列数固定）
真正该放弃:last-child的时候
当列数响应式变化（比如从 4 列切到 3 列），:nth-child(4n) 和 :last-child 都会失效——CSS 伪类无法感知换行逻辑。这时候硬调样式只会增加维护成本。直接换 display: flex + gap，或者 display: grid，:last-child 的问题就从“怎么修”变成了“不需要修”。
浮动布局里处理末尾间距，本质是在给过时模型打补丁。最易被忽略的点是：你花一小时调 :last-child，不如十分钟把父容器改成 display: flow-root，再加一行 gap——错位没了，代码还少了三行。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
