移动端清除浮动必须同时设置 float: none、width: 100% 和 box-sizing: border-box；clear: both 写在父容器无效；推荐用 display: flow-root；媒体查询应使用 min-width 与 orientation 组合。
移动端关浮动必须写 float: none + width: 100% 一起生效
只设 float: none 不够，浏览器仍会沿用旧的盒模型计算逻辑：比如父容器原本靠浮动子项撑高，一关浮动但没重置宽度，子项可能因默认 width: auto 而收缩、换行错位或内容溢出。尤其在 iOS Safari 中，float: none 单独触发时，getBoundingClientRect() 返回的尺寸可能延迟更新一帧。
实操建议：
- 媒体查询里必须同步改三项：
float: none、width: 100%、box-sizing: border-box - 别依赖继承——显式写全，避免某些安卓 WebView 忽略未声明的
box-sizing - 如果子项有
margin-left或margin-right，记得一并设为0，否则单列时左右留白异常
clear: both 写在父容器上完全无效
它只对「文档流中紧邻的块级兄弟元素」起作用，且必须出现在浮动元素之后的第一个流内位置。写在父容器上，浏览器直接忽略；写在 position: absolute 子元素里，更是无意义——绝对定位元素本就不在文档流中。
常见错误现象：
- 父容器加了
clear: both，但高度依然塌陷 - 切换到竖屏后，下拉菜单被截断，实际是清除失效导致后续元素错位挤压
- iOS 15.4+ 上伪元素清除偶尔失灵，根本原因常是
clear: both放错了位置，而非浏览器 Bug
清除浮动优先选 display: flow-root，不是 overflow: hidden
display: flow-root 是专为解决浮动塌陷设计的，不裁剪 box-shadow、不影响 position: fixed 元素定位、也不干扰 z-index 层叠。iOS 15.4+ 和 Android Chrome 64+ 均已支持。
而 overflow: hidden 看似简单，但在真实项目中容易引发连锁问题：
- 安卓 WebView 下吸顶导航突然偏移——因为 overflow 触发新的层叠上下文，改变 fixed 元素参考系
- 弹层、Tooltip 或下拉框被意外截断，尤其当它们用
transform或will-change触发硬件加速时 - 圆角、阴影、渐变边框等视觉效果被硬性裁剪，审查元素能看到边界被切掉
媒体查询断点必须用 min-width，且避开物理像素陷阱
写 @media (max-width: 768px) 是典型反模式：iPad 竖屏逻辑宽正好是 768px，规则不命中；iPhone SE 第三代 CSS 像素宽仅 375px，却要和 768px 同一套规则。真正该监听的是视口宽度与方向组合。
推荐写法：
-
@media (min-width: 480px) and (orientation: portrait)—— 小屏竖向启用单列 -
@media (min-width: 768px) and (orientation: landscape)—— 平板横屏恢复双栏 - 避免同时套用
min-width和max-width，部分老版 WebView 会解析为 false positive
复杂点在于：浮动 + Flex 混用时，一旦媒体查询切换瞬间，浏览器可能先渲染浮动态再切 Flex，造成布局抖动。这不是清除问题，而是渲染顺序不可控——得靠 JS 监听 transitionend 或用 force reflow 打断，但代价高。最稳的解法，是干脆别混用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
