浮动换行主因是box-sizing不统一，导致width:50%在不同环境计算值差1–2px而超100%；需全局声明*{box-sizing:border-box}并置顶，配合font-size重置、img vertical-align修正及弃用float改用flex/grid。
box-sizing 不统一是浮动换行的主因
浮动布局对总宽度极度敏感，而 box-sizing 默认值在各浏览器中不一致：IE/Edge 旧版默认 content-box，Chrome/Firefox 新版虽也默认 content-box，但一旦引入 normalize.css 或 Bootstrap，就可能被悄悄覆盖为 border-box。结果就是同一段 width: 50% 在不同环境里算出的像素值差 1–2px，两列加起来超 100%，直接换行。
必须显式声明：
*,
*::before,
*::after {
box-sizing: border-box;
}
注意：* { box-sizing: border-box; } 必须放在所有 CSS 文件最顶部，否则在 DevTools 的 Computed 面板里会被划掉——说明已被后续规则覆盖。
font-size 和 line-height 影响 baseline 对齐精度
浮动常和文字、图片混排，而 font-size 和 line-height 的默认值在 Safari、Firefox、Chrome 中并不完全一致。尤其当父容器没设 font-size，子元素用 em 或 ex 单位设置宽度时，同一段 CSS 在不同渲染引擎下算出的像素值可能差 1–2px。
- 全局重置
body { font-size: 16px; line-height: 1.5; }，避免继承链放大差异 -
img浮动后底部留白？不是 bug，是vertical-align: baseline默认行为 —— 统一设img { vertical-align: top; } - 慎用系统字体栈（如
system-ui），macOS 和 Windows 下同字号文字宽度可差 1.2px，临界宽度下极易错位
亚像素渲染本身无法“修复”，只能规避
当 width: 50% 算出 375.333px，GPU 渲染层必须取整为整数像素。Chrome 可能四舍五入为 375px，Firefox 算成 374px，Safari 有时保留 subpixel 抗锯齿但不参与 layout width 计算 —— 结果就是两列总宽忽多忽少，缩放时频繁换行或出现 1px 间隙。
clear: both 或 overflow: hidden 对此完全无效，因为它不干预宽度计算过程。
- 放弃
float用于主布局，改用display: flex或display: grid，它们原生支持 subpixel 分配与自动重排 - 若必须保留
float（如老项目维护），对所有浮动子项加max-width: 100%，并确保父容器无transform、overflow: hidden等干扰 BFC 的样式 - 测试时真机双指缩放，观察连续缩放过程中的抖动点，别只看 100% 缩放状态
Retina 屏下伪元素边框要绕开 border 直接写法
直接写 border: 1px solid #ccc 在 DPR=2 下实际占 2 物理像素，粗且虚；用伪元素绘制再缩放，才能精准落到 1 物理像素上。
关键细节：
- 父元素必须设
position: relative，否则::after的position: absolute会脱标到body - 伪元素用
height: 1px+background-color，别用border-bottom—— 后者受box-sizing和line-height干扰 -
transform-origin: 0 100%必须写全，Safari 对bottom关键词解析不稳定 - 务必加
pointer-events: none，否则安卓 WebView 可能拦截点击事件
真正麻烦的不是怎么写伪元素，而是你是否确认过 window.devicePixelRatio 值，并据此调整了所有浮动子项的 height、line-height、font-size 是否为整数 —— 小数点后哪怕一个 .5，都会在高 DPI 下被放大成明显错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
