display: flow-root 是最干净的 BFC 触发方式，专为解决浮动导致父容器高度塌陷而设计，语义明确、无副作用、一行生效，需作用于直接包裹浮动子元素的父容器，现代浏览器（Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+）已全面支持。
display: flow-root 是最干净的 BFC 触发方式
它专为解决这类问题而设计，语义明确、无副作用、一行生效：display: flow-root 会创建一个块级格式化上下文，让父容器重新包含所有子元素（包括浮动的），同时不改变子元素的布局行为——不像 display: flex 或 display: grid 那样强制重排子项。
必须作用在**直接包裹浮动子元素的那个父容器**上。写在祖父层或子元素上都无效。现代浏览器（Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+）已全面支持，2026 年真实项目中可放心使用。
- 不要混用
overflow: hidden和display: flow-root—— 后者已足够，前者反而可能意外裁剪 tooltip 或下拉菜单 - 若需兼容 IE11 及更旧版本，
display: flow-root不生效，得退回到overflow: hidden或clearfix - 父容器若本身是
inline元素（如span），需先设display: inline-block或block，否则flow-root不起作用
overflow: hidden 能触发 BFC，但副作用很实在
overflow: hidden 确实能强制创建 BFC，让父容器高度正常计算，但它不是“修复”，而是“遮盖”：所有超出边界的子内容（比如 position: absolute 的弹层、box-shadow、transform 位移的伪元素）都会被裁剪掉。
常见踩坑点：
立即学习“前端免费学习笔记（深入）”；
-
overflow: visible不触发 BFC，写了等于没写 -
overflow: auto在某些旧版 Safari 中会无故显示滚动条，哪怕内容根本没溢出 - 组件封装时，如果卡片内部用了
overflow: hidden，外部调用方的浮层类组件（如日期选择器）可能直接消失，调试时很难联想到这一行 CSS
clearfix 伪元素方案必须满足三个硬性条件
很多人复制了 .clearfix::after 却没效果，往往是因为漏掉关键项。标准写法必须同时满足：
-
content: ""—— 缺失则伪元素不生成，clear: both彻底失效 -
display: table（推荐）或display: block——table更稳妥，避免 IE8 下 margin 合并异常；block在部分场景下无法撑开高度 -
clear: both—— 这才是清除行为的核心，仅靠前两项不能解决问题
另外注意：clear: both 加在父容器自身上（如 .parent { clear: both; }）完全无效，因为它只影响“同级兄弟元素”的流位置，对内部子项无感。
别忽略浮动本身的语义退场现实
浮动本就不是为整体布局设计的，而是为图文环绕服务。2026 年的真实项目里，如果你还在大量依赖 float 做栅格或导航，大概率说明布局思路卡在十年前。
真正容易被忽略的是：display: flex 或 display: grid 容器中，float 属性会被规范忽略——子元素的 float 自动失效，塌陷问题根本不会出现。这时再套 clearfix 或 flow-root，纯属冗余。
检查当前父容器是否已是 flex 或 grid，比急着加清除逻辑更重要。
