移动端浮动元素渲染偏差源于float脱离文档流及亚像素误差被dpr、缩放等放大，应优先用display: flow-root触发bfc解决，避免overflow: hidden导致fixed定位漂移或阴影裁剪；现代项目须迁移到flex/grid布局。
移动端浮动元素渲染偏差，不是 CSS 写得不够“标准”，而是 float 本身在高 DPR、缩放、字体栈差异和旧 WebView 渲染路径下被放大了固有缺陷——它脱离文档流、依赖亚像素四舍五入、对盒模型极其敏感。单纯调 float 或加 clear 解决不了问题，得从触发机制、容器约束和降级路径三处动手。
为什么 overflow: hidden 在移动端清除浮动容易出事
它确实能撑开父容器，但副作用在移动端更直接：安卓部分 WebView 里，overflow: hidden 会让 position: fixed 导航栏定位漂移；iOS Safari 下可能破坏层叠上下文，导致弹窗被遮挡；某些微信 X5 内核版本还会意外裁剪 box-shadow 或圆角溢出部分。
- 只在明确不需要溢出内容（如纯卡片列表）时用，且必须加在**直接包裹浮动项的父容器**上
- 若父容器已有
transform或will-change，优先换display: flow-root - 测试时打开真机调试，重点看 fixed 元素是否随滚动错位、阴影是否突然消失
display: flow-root 是什么情况下该用的
它是专为解决浮动塌陷设计的 display 值，语义清晰、无裁剪副作用，现代移动端浏览器（Chrome 64+、Firefox 58+、Safari 15.4+、iOS 15.4+）已原生支持。
- 一行生效：
.card-list { display: flow-root; }，不用伪元素、不触发重排 - 兼容兜底可写：
@supports not (display: flow-root) { .card-list { overflow: hidden; } } - 注意：
display: flow-root和float不能共存于同一元素——后者会被忽略
浮动子元素宽度计算为何在缩放时崩掉
根本不是 min-width 没设够，而是百分比宽度遇上 box-sizing: content-box + padding + 高 DPR 渲染取整，导致总宽偶然超 100%。Chrome 四舍五入算成 100px，Safari 算成 99.7px，就差这 0.3px，整行换行。
- 必须全局设：
* { box-sizing: border-box; }，且放在所有样式表最前 - 父容器若带
padding，子项宽度要补偿：width: calc(50% - 12px)，而非死写50% - 避免混用系统字体（如
system-ui），macOS 和 Windows 同一字号下文字宽度能差 1–2px
真正麻烦的不是浮动，而是还在用浮动
除非要兼容 iOS 9 或 Android 4.4 WebView，否则没必要硬扛。Flex 布局下 float 属性直接被忽略，clearfix 类加了也白加——这不是 bug，是规范行为。浮动塌陷、错位、缩放偏移，本质是布局机制过时的信号，不是样式没调准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
