display: flow-root是最直接的bfc触发方式，专为解决浮动塌陷设计，语义明确、无裁剪副作用，chrome 64+/firefox 58+/safari 15.4+全支持；overflow:hidden虽兼容性好但会裁剪弹层、阴影等真实溢出内容；伪元素clearfix需content:""、display:table、clear:both三要素齐全才生效。
display: flow-root 是最直接的 BFC 触发方式
它专为解决这类问题设计，语义明确、无副作用、现代浏览器全支持。给父容器加 display: flow-root 后，它立刻成为独立 BFC，自然包含所有浮动子项——背景、边框、后续元素全部恢复正常。
常见误区是误用 overflow: hidden 或硬套 clear: both。前者会裁剪 position: absolute 弹层、下拉菜单、阴影等真实溢出内容；后者根本不能加在父元素上生效。
-
display: flow-root不干扰子元素原有布局逻辑（不像flex或grid会重置float行为） - Chrome 64+ / Firefox 58+ / Safari 15.4+ 均原生支持，2026 年已可放心落地
- 若需兼容 IE11，才退回到伪元素 clearfix 方案
overflow: hidden 能触发 BFC，但副作用明显
它确实能强制创建 BFC，让父容器重新包裹浮动子项，兼容性极好（IE6+），但关键限制在于：任何真实溢出内容都会被裁剪。
典型失效场景包括：下拉菜单弹出到父容器外、tooltip 悬浮在边缘、box-shadow 被截断、绝对定位的遮罩层被砍掉——这些不是“设计错误”，而是合理需求。
-
overflow: auto和overflow: scroll同样触发 BFC，但可能意外出现滚动条 -
overflow: visible不触发 BFC，写了也无效 - 如果父容器本身已有
overflow: hidden用于其他目的（比如裁剪图片），再加它只是叠加副作用
::after 伪元素 clearfix 必须三要素齐全
伪元素方案本质是模拟一个“浮动之后的兄弟块”，但它必须渲染出来才能起效。漏掉任意一项，清除就失败。
标准写法：.container::after { content: ""; display: table; clear: both; }。缺一不可。
-
content: ""是最常被遗漏的——没有 content，伪元素不生成，clear: both形同虚设 -
display: table比block更稳妥：避免旧版 IE margin 双倍问题，且天然触发 BFC - 若父容器自身设置了
overflow: hidden或auto，可能干扰伪元素的清除行为，导致失效 - 嵌套浮动结构需逐层加
.clearfix：外层和每个含浮动子项的内层容器都得单独处理
float 自身也能触发 BFC，但不该这么用
给父元素设 float: left 确实能创建 BFC 并撑开高度，但它会让父元素自己也脱离文档流——宽度丢失、后续元素上移、布局链断裂。
这不是修复，是把问题转移到上层。你得再给它的父级处理塌陷，形成连锁反应。同理，display: inline-block 也会丢失宽度并引入三像素间隙。
- 这些方式属于“用副作用解决副作用”，调试时极易混淆真正的问题源头
- 真正该问的是：还在用
float做整体布局吗？如果是flex或grid容器，子元素的float会直接失效，塌陷根本不会发生 - 强行混用
float和flex/grid不仅无效，还会掩盖真实布局意图，增加维护成本
display: flow-root 已成标配，还靠 clearfix 打补丁，往往说明布局模型本身已经过时。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
