display: flow-root是清除浮动的首选方案，它使直接父容器触发BFC自动包含浮动子元素，语义清晰、无裁剪副作用，Chrome 58+/Firefox 57+/Safari 10.1+等现代浏览器已全面支持。
直接给浮动元素的**直接父容器**加 display: flow-root，这是最干净、无副作用的解法。其他所有“在 footer 上加 clear: both”或“在浮动后插空 div”的做法，都是在补救表象，容易失效。
为什么给 footer 加 clear: both 常常没用
因为 clear: both 只对自身生效，且只在它前面有浮动兄弟元素时才触发换行。常见失效场景包括：
- footer 被包在
<main>或<div class="wrapper">里，而浮动实际发生在更内层（比如.content内部） - footer 设了
position: absolute或position: fixed—— 它已脱离文档流，clear失效 - footer 是
inline或inline-block显示 ——clear只对块级元素起作用 - 外层用了
display: flex或display: grid—— 浮动子项不影响父高，clear根本不触发
display: flow-root 是什么，为什么推荐它
它让父容器触发 BFC（块级格式化上下文），自动包含所有浮动子项，从源头避免高度塌陷。相比老方案，优势明显：
- 语义清晰：
flow-root就是为解决这类问题设计的，不是 hack - 无副作用：不会裁剪
position: absolute的下拉菜单、tooltip 或 box-shadow - 不干扰滚动或 margin 合并
- 兼容性足够：Chrome 58+ / Firefox 57+ / Safari 10.1+ / Edge 79+（2017 年后主流版本全覆盖）
用法很简单：.content { display: flow-root; } —— 不需要改 HTML 结构，也不依赖“后面是谁”。
立即学习“前端免费学习笔记（深入）”；
伪元素 ::after 清除法怎么写才真正生效
如果项目还需兼容 IE11 或旧版 Android WebView，用 ::after 伪元素是稳妥选择，但必须同时满足三个硬性条件：
-
content: ""（缺省值none不渲染，清除无效） -
display: table（比block更稳，兼容 IE6/7 的 margin 双倍问题） -
clear: both（left或right只清单侧，两栏布局必须用both）
推荐写法：.wrapper::after { content: ""; display: table; clear: both; }。别用 ::before —— 它在 Safari 15.6 前、IE 和部分 WebView 中不参与清除计算，还可能干扰 flex 顺序。
真正容易被忽略的是：BFC 触发是单层的。display: flow-root 只作用于当前父容器，不会向下穿透；如果子容器内部也有浮动，得单独再处理一次 —— 别假设“清了一次就全好了”。
