clear: both 仅作用于自身且需为浮动元素同级兄弟，对嵌套浮动无效；display: flow-root 是现代推荐的bfc方案，伪元素clearfix需content、display、clear三者齐全。
clear: both 不能加在父容器上生效
它只作用于自身所在的块级盒，且必须是浮动元素的同级兄弟元素。给父容器写 .parent { clear: both; }，浏览器会去检查它前面有没有浮动兄弟元素，而不是看它内部的子项——内部浮动完全被忽略，computed height 依然是 0px。
clear: both 对嵌套浮动完全无效
DOM 层级越深，clear: both 越“清不到”。比如 .submenu 里有两个 float: left 的 .item，你在其中一个 .item 上加 clear: both，只影响它自己位置，.submenu 高度照样塌陷。
-
clear不穿透父容器，不向上查找祖先浮动 - 即使每层都加了
clear: both，只要某一级没形成 BFC（比如没设display: flow-root），整条链就断掉 - 伪元素
::after能模拟“同级兄弟”，但前提是它得渲染出来：漏掉content: ""、或父容器是inline级，都会让它失效
真正该用 display: flow-root 而不是 clear
display: flow-root 是 W3C 明确定义的 BFC 触发方式，专为解决浮动塌陷而生。它让父容器重新包含所有浮动子项，背景、边框、后续元素全部回归正常。
- 现代浏览器全支持（Chrome 64+ / Firefox 59+ / Edge 79+）
- 无副作用：不裁剪
box-shadow、不误触发滚动条、不干扰border-radius - 不能和
display: inline混用，否则退化为block - IE 全版本不支持；Safari ≤10.2 也不支持——若项目仍需兼容这些，必须 fallback 到伪元素方案
伪元素 clearfix 必须三要素齐全
最稳妥的兼容写法是：.clearfix::after { content: ""; display: table; clear: both; }。缺一不可，且要确保父容器是 display: block。
-
content: ""缺失 → 伪元素不生成 →clear: both无对象可作用 -
display: table比block更稳：自动形成 BFC，且避免基线间隙问题 - 父容器若原为
inline-block或inline，必须显式覆盖为block，否则::after不渲染 - 别在 Flex/Grid 容器里加这个类——它们自身已是独立格式化上下文，加了反而可能干扰对齐
background-attachment: fixed 在浮动上下文中行为异常，或 background-origin 默认为 padding-box 却没 padding 可落脚。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
