float:left本身不会导致文字模糊，但会放大半像素渲染问题——浮动使行框计算复杂化，当容器宽度或字体尺寸落在非整数像素（如375.3px）时，浏览器将文字渲染在sub-pixel位置触发抗锯齿，肉眼可见毛边发虚。
float: left 本身不会导致文字模糊，但会放大半像素渲染问题——尤其在缩放、视口边界或字体度量不一致时，文字边缘出现毛边、发虚、断续，本质是浏览器把文字绘制在了 sub-pixel 位置上，而浮动让这个偏差更易暴露。
为什么 float:left 会让文字看起来模糊
浮动元素脱离文档流后，其周围内联内容（包括文字）的行框（line box）计算方式变复杂。浏览器需动态对齐基线、处理 vertical-align、协调 line-height 和字体实际渲染高度。一旦父容器宽度或字体尺寸落在非整数像素值上（比如 375.3px 宽的容器里排 14px 字体），Chrome 或 Safari 就可能把某一行文字的渲染起点定在 0.3px 偏移处，触发 sub-pixel 抗锯齿，肉眼就看到“糊”。
- 常见诱因：父容器用了
width: 50%+padding: 12px，但没用box-sizing: border-box，导致内部可用宽度为小数 - 图片浮动时若没设
vertical-align: top，底部会多出几像素空白，间接拉高行框，扰动文字垂直定位 - 系统字体栈混用（如
system-ui, -apple-system, sans-serif）在 macOS 和 Windows 下字宽差 1–2px，浮动布局临界换行时，文字被迫折到下一行并错位重绘
如何快速验证是不是半像素导致的模糊
打开 DevTools → Elements 面板 → 选中模糊文字的父 <p> 或 <div> → 在 Styles 面板里临时添加：
transform: translateZ(0);
如果模糊立刻减轻或消失，基本可确认是 sub-pixel 渲染问题（translateZ(0) 强制 GPU 层合成，绕过部分 CPU 渲染插值逻辑）。
立即学习“前端免费学习笔记（深入）”；
- 更准的判断方式：在 Rendering 面板（Chrome）中勾选 “Paint flashing”，然后滚动或缩放页面——持续闪烁的区域就是频繁重绘的 sub-pixel 边界
- 检查 computed 样式里的
left/top/line-height值是否含小数（如top: 23.5px） - 禁用所有浮动（临时删掉
float: left），看文字是否恢复锐利——若恢复，说明浮动只是“触发器”，真正问题是布局精度失控
真正有效的修复手段（不是加 hack）
不要靠 transform: translateZ(0) 或 -webkit-font-smoothing: antialiased 治标。要从浮动布局的底层约束入手：
- 所有参与浮动的容器和图文组合，必须统一
box-sizing: border-box，且放在样式表最顶部（避免被第三方 CSS 覆盖） - 浮动图片务必加
vertical-align: top，否则默认baseline会在底部留白，干扰行高计算 - 避免用
max-width: 100%配float: left——改用显式width（如width: 300px）或flex-basis，让浏览器有确定的排版锚点 - 文字容器若紧邻浮动项，建议加
min-width: 1px，防止极端缩放下浏览器把 inline 容器宽度算成 0，引发重排抖动
浮动本身没坏，但它像一把尺子，把你在盒模型、字体度量、渲染管线里留下的所有微小误差都标得清清楚楚。修复模糊，关键不是“怎么让 float 不糊”，而是“怎么让整个浮动上下文的像素对齐不可妥协”。
