display: flow-root 是移动端 H5 清除浮动最轻量无副作用的方式，一行声明创建 BFC，不依赖伪元素、不裁剪溢出内容、不触发重排；兼容现代浏览器，老环境需降级为标准 clearfix。
在移动端 H5 开发中，display: flow-root 是最轻量、无副作用的清除浮动方式，前提是目标环境支持（Chrome 64+、Safari 10.1+、Firefox 53+、iOS Safari 10.3+、Android WebView 62+ —— 这些覆盖了当前绝大多数活跃设备）。
为什么 display: flow-root 在 H5 里最轻量
它不依赖伪元素、不插入额外 DOM、不触发重排或滚动条、不裁剪 tooltip/下拉菜单等绝对定位溢出内容。一行声明即可创建 BFC，父容器自动包裹浮动子元素，且完全语义化 —— 它本就是为这个场景设计的 CSS 属性。
- 对比
::after清除法：需定义类、加 class、维护样式表，多出至少 4–5 行 CSS；而display: flow-root直接写在需要的父元素上，无复用成本 - 对比
overflow: hidden：后者在 iOS Safari 中可能意外截断position: fixed弹层（如遮罩层、键盘弹起时的输入框跟随），也会影响transform触发的合成层 - 对比
clear空标签：增加无意义 DOM 节点，在移动端会略微抬高首屏渲染时间、增加 JS 事件委托复杂度
display: flow-root 的兼容性兜底策略
如果你的 H5 需要兼容 Android 4.4 WebView（display: flow-root 不支持）或微信内置 X5 内核早期版本（部分 6.x 版本未完整实现），不要 fallback 到 overflow: hidden —— 它在软键盘弹出时容易导致页面“跳动”或输入框失焦。
- 稳妥做法是：检测是否支持
flow-root，不支持时降级为标准 clearfix 类（含::after+clear: both） - 检测代码可简化为：
if ('flowRoot' in document.documentElement.style) { /* 支持 */ }，或直接用 PostCSS 插件（如postcss-flow-root）自动补全 - 避免使用
*zoom: 1或display: inline-block等 IE 专用 hack，它们在移动端无意义且可能干扰 flex/grid 布局
什么时候不该用 display: flow-root
它只解决「父容器高度塌陷」和「后续流内容侵入浮动区域」这两个问题。如果你遇到的是文本环绕浮动图片后段落错位、或需要控制浮动元素之间的间隙，display: flow-root 并不干预这些行为 —— 它只是让父容器“看见”浮动子元素的高度。
立即学习“前端免费学习笔记（深入）”；
- 文本环绕问题应通过
margin、line-height或现代方案（shape-outside）调节，而非靠清浮动 - 若浮动子元素本身用了
transform或will-change，flow-root不影响其渲染层级，但要注意它会创建新的层叠上下文 —— 这在 modal 叠加顺序中可能被忽略 - 当父元素同时设置了
flex或grid，display: flow-root会被覆盖（display值互斥），此时浮动本身已不推荐，应直接重构为 flex 子项
真正轻量的关键，不是代码行数最少，而是副作用最小、适配路径最短、未来维护成本最低 —— display: flow-root 在移动端 H5 的实际运行环境中，基本满足这三点。唯一需要你多想半秒的，是那个极少数仍需兼容的老内核场景下的降级逻辑。
