高 dpi 屏下浮动元素边框发虚或偏移1px，本质是float脱离文档流致父容器塌陷，叠加非整数逻辑像素（如height:20.5px、top:50%）触发亚像素插值渲染；清除浮动仅解决塌陷，不抑制sub-pixel渲染，需用flex/grid替代布局或严格约束整数尺寸+伪元素缩放+合成层优化。
高 DPI 屏幕下浮动元素边框“发虚”或“偏移 1px”，不是边框写错了，而是 float 让元素脱离文档流后，父容器高度塌陷 + 浏览器对非整数逻辑像素做亚像素插值渲染共同导致的——你看到的错位，本质是 getBoundingClientRect().top 返回了 20.5 这类值，而设备物理像素无法分割，只能模糊混合。
为什么清除浮动后仍出现 1px 偏移？
清除浮动（比如加 display: flow-root 或伪元素）只解决了父容器塌陷，但没解决 sub-pixel 渲染问题。只要浮动子项的尺寸、位置或行高含小数（如 height: 20.5px、line-height: 1.5、top: 50%），在 window.devicePixelRatio === 2 或 3 的设备上就会触发亚像素绘制。
- 用 DevTools 的 “Show Rasterization Borders” 查看：若边框边缘带半透明描边，就是 sub-pixel 已激活
-
vertical-align: baseline即使没显式写，也会在含文字/图片的浮动上下文中生效，影响底部对齐精度 - 父容器设了
font-size: 16px，但 iOS 开启「更大字体」后实际渲染可能是18.2px，连带所有基于它的计算都失准
float + border 在高 DPI 下为何特别容易虚？
直接写 border: 1px solid #ccc，在 DPR=2 设备上浏览器会把它渲染成 2 物理像素宽，且因未对齐像素网格，边缘模糊；而用 ::after + transform: scaleY(0.5) 模拟边框，又极易因漏掉关键条件失效：
- 父元素没设
position: relative→ 伪元素定位脱标到body - 没加
pointer-events: none→ 在微信 WebView 中拦截点击 -
transform-origin写成bottom而非0 100%→ Safari 解析不稳定，缩放中心偏移 - 伪元素用
border-bottom而非height: 1px; background-color→ 受box-sizing和line-height干扰，高度不准
现代方案里最该先动哪一步？
别在 float 上死磕适配。高 DPI 下的对齐精度问题，根源是 float 本身不提供像素对齐保障。真正该优先做的，是替换布局模型：
- 用
display: flex替代float: left：子项默认沿主轴排列，align-items: stretch天然等高，无塌陷，无 baseline 干扰 - 用
display: grid替代多列浮动：配合grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，响应式分栏+像素对齐一步到位 - 如果必须保留 float（如老项目兼容），至少确保：
height、line-height、font-size全为整数 px；父容器加text-size-adjust: none锁定缩放；清除浮动后手动加translateZ(0)触发合成层抑制插值
复杂点不在怎么画细边框，而在 float 的设计逻辑和高 DPI 渲染机制根本就互斥——你越调细节，越暴露它不适合现代屏幕的事实。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
