display: flow-root 是移动端清除浮动的首选方案，它在横屏切换、硬件加速等复杂场景下稳定生效，不依赖伪元素、不受 transform 干扰，且不裁剪溢出内容；iOS Safari 15.4+ 和 Android Chrome 64+ 均原生支持。
display: flow-root 是移动端清除浮动的首选方案
它在横屏切换、硬件加速、WebView 渲染管线调度等复杂场景下仍稳定生效，不依赖伪元素生成时机，也不受 transform 或 will-change 干扰。iOS Safari 15.4+ 和 Android Chrome 64+ 均已原生支持，2026 年绝大多数生产环境可直接使用。
相比 overflow: hidden，它不裁剪 box-shadow、不截断 position: absolute 下拉菜单、不影响 position: fixed 导航栏吸顶；相比 .clearfix::after，它无需额外 class、不因 DevTools 默认隐藏伪元素而误判失效。
横屏切换时浮动突然崩了？必须同步重置子项布局逻辑
仅靠 clear: both 或只加 display: flow-root 不够——横屏是独立渲染上下文，浮动元素仍处于脱离流状态，父容器无法重新包含它们。
实操建议在 @media (orientation: landscape) 中强制回归文档流：
立即学习“前端免费学习笔记（深入）”；
-
float: none：退出浮动是前提，否则flow-root也包不住“飘着”的子项 -
width: 100%：避免原width: 50%等比例值在横屏宽屏下换行错位 -
box-sizing: border-box：显式声明，防止某些安卓 WebView 忽略继承导致 padding/border 撑破
.clearfix::after 在移动端容易失效的三个盲点
这个写法仍在大量框架中沿用，但移动端尤其容易踩坑：
-
content: ""缺失 → 伪元素根本不生成 → 清除完全无效 -
display没设成table或block→ 伪元素是行内级 →clear: both对它不起作用 - 父容器本身设了
overflow: hidden或auto→ BFC 已提前闭合 → 伪元素清除动作被忽略
Chrome DevTools 默认不显示 ::after，要手动勾选 “Show user agent shadow DOM” 才能确认是否渲染成功。
为什么不要用 overflow: hidden 清除浮动
它确实能触发 BFC 并撑开父高，但副作用在移动端更致命：
- 裁剪所有溢出内容：下拉菜单、tooltip、
transform移出边界的动画帧、负margin装饰全被切掉 - 某些 Safari 版本下，即使内容没溢出，
overflow: auto也会意外显示空白滚动条 - 当横屏后子元素宽度动态超出父容器（如文字流变宽），内容突然消失，调试时很难联想到是
overflow搞的鬼
真正容易被忽略的是：浮动本身在现代布局中已基本退场，但清除浮动的问题往往在对接第三方组件、维护老 CMS 模板或实现图文环绕时突然爆发——这时候选错方法，崩的不只是高度，还有 z-index 层叠、可访问性节点顺序、甚至 JS 读取的 getBoundingClientRect() 值。
