优先用display: flow-root，次选.clearfix::after，慎用overflow: hidden；因clear: both仅作用于文档流中紧随浮动后的块级兄弟元素，加在父容器上语义无效，而flow-root显式创建BFC，一行解决塌陷且无副作用。
直接说结论：优先用 display: flow-root，次选 .clearfix::after 伪元素，慎用 overflow: hidden——尤其在移动端或含 fixed 元素的场景下。
为什么 clear: both 写在父容器上完全无效？
这不是写法漏了，是逻辑错位：clear 只对「自身在文档流中的位置」起作用，它让当前元素避开前面的浮动兄弟，但对内部浮动子项毫无感知。父容器加 clear: both，等于让它自己“躲开一个不存在的前一个浮动兄弟”，浏览器直接忽略。
真正起效的清除动作，必须发生在浮动子元素的「下一个同级块级元素」上——伪元素 ::after 被插入到父容器末尾，恰好满足这个条件。
-
clear: both加在浮动子元素上：只让它自己换行，不撑父高 -
clear: both加在父容器上：语法合法，但语义无效 -
clear: left或clear: right：无法应对双向浮动混用，容易漏清
display: flow-root 是什么？为什么推荐它？
这是 CSS 专为解决浮动塌陷设计的值，本质是触发 BFC（块级格式化上下文），让父容器重新包含浮动子元素的高度，且不改变溢出行为、不裁剪阴影/下拉菜单/fixed 元素。
立即学习“前端免费学习笔记（深入）”；
- 一行生效：
.parent { display: flow-root; } - 现代浏览器全覆盖：Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+
- 兼容性兜底可用
@supports：
.parent { display: flow-root; }
@supports not (display: flow-root) {
.parent { overflow: hidden; }
}注意：flow-root 对 flex 或 grid 容器无效——它们本身已是独立格式化上下文，且会忽略子元素的 float。
.clearfix::after 必须写全哪几个属性？
缺一不可，少一个都可能在某些环境（如旧版 QQ 浏览器、UC 内核）中失效：
-
content: ""：伪元素无内容则不生成盒模型，写了空字符串才渲染 -
display: table：比block更稳妥，避免 IE 下 margin 双倍、UC 把 line-height 当 height 等问题 -
clear: both：核心清除动作，必须和前两项共存 -
height: 0：移动端部分老内核需要显式设为 0，否则可能误算高度
标准写法：
.clearfix::after {
content: "";
display: table;
clear: both;
height: 0;
}如果还要兼容 IE6–7，补一句 *zoom: 1 即可，但纯现代项目可省略。
哪些情况根本不用清浮动？
不是所有“看起来塌了”的问题都需要清浮动——先确认是否真在用 float：
- 父容器是
display: flex或display: grid：子元素的float属性被规范强制忽略，此时加.clearfix完全无效 - 父容器已设
height或min-height：这些显式值会覆盖 clearfix 计算出的高度，先检查是否被覆盖 - 嵌套浮动结构：每一级「直接包裹浮动子项」的父容器都得单独加
.clearfix，外层加了不代表内层自动生效
真正麻烦的从来不是写不对，而是加错了层级、或者在 Flex 容器里徒劳地塞 ::after——那个伪元素根本不会参与布局。
