display: flow-root 是目前最轻量、副作用最小的浮动清除方案，它通过创建 bfc 天然包裹浮动子元素，无需伪元素、无重排、不裁剪溢出，兼容现代浏览器；仅 ie 不支持，且会禁用 margin-collapse。
隔墙法（额外标签法）为什么现在基本不用
它本质是在浮动元素末尾硬塞一个 <div class="clear"></div>，靠 clear: both 打断浮动流。问题不在“能不能用”，而在于副作用太具体：
-
clear: both每次都会触发浏览器回溯前面所有浮动元素位置，强制重排（reflow），动态插入内容时性能损耗明显 - HTML 里多出无语义、无内容的空标签，破坏结构可维护性，尤其在 CMS 或组件化项目中容易失控
- 必须确保该标签是块级元素（
<div> 可以，<code><span></span>不行），否则clear不生效 - 和现代布局（如
display: flex或display: grid）混用时，这个标签可能被忽略或引发意外 margin 行为 - 必须带
content: ""—— 没这句，伪元素根本不渲染，clear: both形同虚设 -
display: block是必需的，display: table也可行（双伪元素法常用），但不能省略 - IE6–IE7 需要
*zoom: 1触发 hasLayout，否则伪元素不参与盒模型计算 - 如果父容器本身已有
overflow: hidden，伪元素可能被裁剪，导致清除失败 - 不要和
display: flow-root同时用——BFC 已创建，再加伪元素纯属冗余，还可能干扰渲染 - 写法就一行：
display: flow-root，无伪元素、无 hack、无额外 class - 不触发重排，也不裁剪溢出内容（对比
overflow: hidden），对position: absolute子元素、阴影、transform 偏移都友好 - 兼容性已覆盖绝大多数现代环境（Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+），仅 IE 完全不支持
- 注意两个隐性影响：
margin-collapse被禁用（相邻块级元素外边距不再合并），font-size等继承值可能重置，老项目需验证 - 纯布局场景，优先用
display: flex或display: grid，它们天然不塌陷，无需任何清除 - 只有文字环绕、旧系统无法重构、或特定印刷样式需求时，才保留
float - 一旦用了
float，display: flow-root是目前最轻量、副作用最小的兜底方案；::after仅用于需兼容 Safari 15.3 及更早版本的项目
伪元素法（::after）实际怎么写才不翻车
主流写法是给父容器加 .clearfix 类，再用 ::after 插入一个清除节点。但很多项目抄错就失效：
display: flow-root 才是真·现代解法
它不是“另一种清除方式”，而是从源头绕过清除逻辑：直接让父容器成为独立 BFC，天然包裹浮动子元素。
别在浮动上堆方案，先问一句：真需要 float 吗
浮动本就不是为页面布局设计的，它的原始语义是“文字环绕图片”。今天用 float 做两栏、三栏、网格，本质是在给过时机制打补丁。
