如何修复CSS浮动布局在移动端错位的问题？

移动端清除浮动应优先用 display: flow-root，它专为解决浮动塌陷设计，不裁剪阴影、不干扰固定定位；兼容老版本时用含 content、display、clear、height 四要素的 clearfix；禁用 overflow: hidden。

为什么只加 clear: both 在移动端没用

因为 clear: both 只对文档流中紧邻的块级兄弟元素生效，且必须写在浮动元素之后的第一个流内位置。移动端常见错误是把它写在父容器上、或写在 float 元素之前、或套在 position: absolute 子元素里——这些情况下浏览器直接忽略。更麻烦的是，iOS Safari 和部分安卓 WebView 在触发硬件加速（比如用了 transform 或 will-change）后，::after 伪元素清除也可能失效。

移动端该用 overflow: hidden 还是 display: flow-root

优先选 display: flow-root。它专为解决浮动塌陷设计，不裁剪 box-shadow、不干扰 position: fixed、不影响 z-index 层叠，iOS 15.4+ 和 Android Chrome 64+ 都已支持。如果要兼容老版本（如 iOS 12），再降级用 clearfix，但必须写全四要素：content: ""、display: table、clear: both、height: 0。千万别用 overflow: hidden —— 它在安卓 WebView 中容易导致吸顶导航错位，在 iOS 上可能让弹层被截断，且会隐藏本该可见的阴影和圆角溢出。

媒体查询里关浮动，min-width 还是 max-width

必须用 @media (min-width: 480px)，不是 max-width。移动端优先意味着默认样式是单列堆叠（float: none + width: 100%），再逐步增强。用 max-width: 767px 是反模式：当设备逻辑宽度恰好是 768px（比如 iPad 竖屏），规则完全不命中，两栏直接挤成一行并溢出。每个断点切换时，要同步改三项：float: none、width: 100%、box-sizing: border-box（确保 padding 不撑破宽度）。

转 Flex 后 JS 里哪些地方会悄悄崩掉

最容易被忽略的是 JS 中隐式依赖浮动位置的逻辑：offsetTop 或 getBoundingClientRect() 返回值会变；靠浮动脱离流来辅助 position: absolute 定位的元素，现在得手动加 position: absolute 并重算 top/left；监听 resize 后读 clientHeight 判断“是否清浮完成”的代码，可以整个删掉——Flex 下父容器高度天然包含子项。不翻 JS，只调 CSS，大概率修不完。