display: flow-root是现代项目清除浮动的首选方案，它专为创建无副作用BFC设计，不裁剪溢出、不触发滚动、不干扰定位，且语义明确、代码简洁；而overflow:hidden虽能清浮动但会裁剪下拉菜单、tooltip等溢出内容，overflow:auto可能意外显示滚动条，二者均存在兼容与交互隐患。
现代项目里，display: flow-root 是最轻量、无副作用的清除浮动方式，不用写额外类、不触发隐藏溢出、也不依赖伪元素兼容性处理。
为什么 overflow:hidden 不总是安全
它会裁剪掉所有溢出内容，比如下拉菜单、tooltip、绝对定位子元素超出父容器的部分。即使加了 overflow: auto，滚动条也会在不需要时出现，影响 UI 一致性。某些情况下还会意外改变元素的层叠上下文（z-index 行为），尤其在动画或 modal 场景中容易出问题。
-
overflow: hidden在 Safari 旧版本中可能不触发 BFC，需配合zoom: 1或display: inline-block - 若父容器本身需要横向滚动（如表格横向滑动），
overflow: hidden会直接禁用该能力 - SEO 友好性差：搜索引擎可能无法索引被裁剪的内容
clearfix 伪元素法要注意什么
主流框架（如 Bootstrap）仍在用的 .clearfix::after 方案，核心是创建一个不可见但参与布局的块级元素并清浮动。但实际使用时容易漏掉关键细节：
- 必须声明
content: ""，否则伪元素不生效 - IE6/7 需要
zoom: 1触发 hasLayout，现代项目可省略 - 推荐用
display: table而非display: block，避免部分浏览器下 margin 折叠异常 - 不要给
::after加height或line-height，否则可能撑开多余空白
标准写法：
.clearfix::after { content: ""; display: table; clear: both; }
立即学习“前端免费学习笔记（深入）”；
display: flow-root 是什么，为什么推荐
这是 CSS Display Module Level 3 定义的值，专门用于创建一个独立的块级格式化上下文（BFC），且不带来副作用。它和 overflow: hidden 效果一致（能包裹浮动子元素），但不会隐藏内容、不干扰滚动、不改变 z-index 层级。
- 支持所有现代浏览器（Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+）
- 无需额外 class，直接写在父容器上：
display: flow-root - 比
overflow: hidden更语义化——你不是想隐藏内容，只是想建立 BFC - 与 flex/grid 并存友好，不会覆盖已有布局逻辑
真正容易被忽略的是：浮动本身已基本被 flex 和 grid 取代，但清除浮动的问题仍会在维护老项目、处理第三方组件或特定排版（如图文环绕）时突然出现——这时候选错方法，往往不是布局错位，而是引发更隐蔽的交互或可访问性问题。
