display: flow-root是解决浮动塌陷的最优解，一行代码触发BFC使父容器重新包含浮动子项高度，无裁剪、无额外DOM、不干扰样式；clear: both加在父元素上无效，因clear只作用于自身而非子元素。
display: flow-root 是当前最直接有效的解法，一行 CSS 即可触发 BFC，父容器立刻重新包含浮动子项高度，无裁剪、无额外 DOM、不干扰子元素样式。
为什么 clear: both 加在父元素上完全无效
因为 clear 只作用于「自身」，不是用来“清理子元素”的。给父容器写 .parent { clear: both; }，它只会尝试避开前面的浮动兄弟元素，对内部浮动子项毫无感知——父容器依然看不见子项，高度还是 0。
真正起效的 clear: both 必须出现在浮动子元素之后、且仍在同一父容器内的块级元素上（比如伪元素或空 <div>）。但硬塞一个空 <div> 会污染 HTML 结构。
-
clear不是“清除浮动”这个动作的指令，而是“让当前元素避开浮动”的布局行为 - 浮动子元素脱离文档流，父容器高度计算时直接忽略它们，这不是“没清干净”，而是“根本没参与计算”
- 调试时看到父容器高度为 0，第一反应不该是“清得不够”，而应确认：子元素是否真在浮动？computed 样式里
float值是不是none？
用 display: flow-root 的注意事项
它专为解决这类问题设计，语义明确、副作用为零，但有明确适用边界：
立即学习“前端免费学习笔记（深入）”；
- 只对含
float: left或float: right子元素的父容器有效；如果子元素已用position: absolute或父容器本身是display: flex/display: grid，float会被浏览器忽略，此时加flow-root既无必要也无效果 - Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+ 全支持，2026 年绝大多数项目可直接使用
- 兼容性兜底可用
@supports，例如：.container { display: flow-root; }@supports not (display: flow-root) { .container { overflow: hidden; } } - 别和
overflow: hidden混用——后者会裁剪position: absolute弹层、下拉菜单、box-shadow等溢出内容，而flow-root完全不干涉溢出行为
什么时候还得写 .clearfix::after
仅限两类真实场景：需要兼容 IE11 及更老内核；或对接无法修改的 CMS 输出 HTML（比如第三方建站平台生成的固定结构）。
标准写法必须同时满足三项，缺一不可：
-
content: ""：不写就等于没生成伪元素，DevTools 默认不显示，需手动勾选 “Show user agent shadow DOM” 才能看到 -
display: table：比display: block更稳妥，能避免 IE6/7 的 margin 双倍问题，且天然触发 BFC 边界 -
clear: both：强制该伪元素落到所有浮动子元素下方，从而撑开父容器底部
嵌套浮动结构中，每一级「直接包裹浮动子项」的容器都得单独加 .clearfix，外层加了不代表内层自动生效；父容器若已设 height 或 min-height，会覆盖 clearfix 带来的高度计算，得先检查这些显式值。
真正容易被忽略的点，往往不在写法本身，而在上下文：比如父容器用了 vertical-align 导致基线错位，或父子间 margin 折叠让视觉高度看似正常但间距异常——这些不会报错，但会让布局“看起来差不多，实际总差一点”。
