只在最外层加 clearfix 会失效，因为 ::after 伪元素仅清除当前元素内部同级浮动，无法影响孙子级浮动；需逐层为产生浮动的直接父容器添加 clearfix 或使用 display: flow-root 触发 BFC。
为什么只在最外层加 clearfix 会失效
因为 ::after 伪元素清除的是「当前元素内部同级的浮动兄弟」，它不会穿透到孙子级或更深层。比如 .sidebar 里嵌套了 .nav，.nav 里又有 .item 浮动，若只给 .sidebar 加 clearfix，.nav 本身高度仍为 0——它的子项浮动未被包裹，导致背景、边框、后续兄弟元素全部错位。
逐层触发 BFC 比写多个 clearfix 更可靠
现代项目优先用 display: flow-root，它让容器自身成为 BFC，天然包含所有后代浮动（包括嵌套多层的），且无副作用。
-
display: flow-root支持 IE11+ 和所有现代浏览器；IE10 及更早需降级 - 不要混用：若父容器已设
display: flow-root，再加clearfix是冗余 - 注意缩放继承：
flow-root会重置某些 inherited 属性（如font-size缩放），若容器内有em单位文本，需检查是否意外变小
必须手动干预的层级怎么加 clearfix
当某层容器不能改 display（比如被第三方库锁定样式），或需兼容老浏览器时，clearfix 仍需逐层加在「产生浮动的直接父容器」上。
- 每个浮动容器都要单独加类，例如：
<div class="nav clearfix"></div>、<div class="sidebar clearfix"></div> - 标准写法必须包含
::before和::after，否则旧版 Safari 可能出现外边距折叠异常 - 避免用
<div style="clear:both"></div>插入空标签——动态渲染（如 React/Vue）中容易漏加或错位
用开发者工具快速定位哪一层没清好
错乱时别猜，直接打开 DevTools 逐层选中父容器，看 computed height 是否为 0 或远小于预期。
立即学习“前端免费学习笔记（深入）”；
- 临时加
outline: 1px solid red查看实际占位范围 - 确认 DOM 层级：浮动子项是否真在该父容器内？CSS 选择器是否意外匹配到其他节点？
- 特别注意：Flex/Grid 容器内浮动完全无效，此时加
clearfix或flow-root都不起作用——得先检查布局模式
