嵌套列表加 clear:both 仍塌陷是因为 clear 只作用于当前元素，不触发父容器重算高度；需为每层浮动容器设 display: flow-root 创建 BFC，或逐层用伪元素清除。
为什么嵌套列表里加了 clear:both 还是塌陷
因为 clear 只作用于“当前元素自身”，它不会让父容器重新计算高度。你在子列表末尾加一个 div style="clear:both"，只是把那个 div 往下压了一行，父 ul 或 ol 依然不知道里面浮动了什么——它的 height 还是 0。浏览器不自动向上穿透多层去“感知”浮动，必须每一层都主动收口。
给每层浮动列表容器加 display: flow-root
这是现代、干净、无副作用的解法。只要父容器（比如 ul、li、ol）本身设置了 float，或其子项用了 float，就给它加 display: flow-root：
-
flow-root会为该元素创建一个新的 BFC，天然包含所有浮动子项，高度自动撑开 - 不影响定位、不裁剪溢出、不改变盒模型，比
overflow: hidden更安全 - 兼容 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+；旧浏览器可回退到
overflow: auto
示例：
ul.nested {
display: flow-root; /* 第一层 ul */
}
ul.nested li {
display: flow-root; /* 每个 li 若含浮动子项，也需独立触发 BFC */
}
ul.nested li ul {
display: flow-root; /* 嵌套的 ul 同样要加 */
}用伪元素清除时，::after 必须写在每一层容器上
很多人只给最外层 ul 加 .clearfix，结果内层 li 背景消失、边框错位。关键点在于：::after 是附加在“当前选择器匹配的元素”上的，不是全局广播。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
.clearfix::after只加在顶层ul上 → 内层li仍塌陷 - 正确做法：为每一级可能包裹浮动子项的容器单独定义清除规则，比如
ul.nested::after、li.has-float::after、ol.sublist::after - Chrome DevTools 默认不渲染
::after，要手动勾选 “Show user agent shadow DOM” 才能看到是否生效 - 若该容器已设
height或min-height，会覆盖::after带来的高度计算，导致清除失效
什么时候该停手，换布局模型
如果你发现自己在 ul 里给 li 加 float，又在 li 里给按钮、图标加 float，还一层层补 clearfix——这不是在修布局，是在给过时机制打补丁。浮动本就不适合嵌套列表这种语义化结构。
-
display: flex可直接替代float:left/right排列，且父容器天然撑高 -
display: grid更适合复杂嵌套项对齐，比如带图标、文字、箭头的多级菜单 - 真正难处理的不是“怎么清”，而是“为什么非要用 float”——检查是否被历史代码或旧教程绑架了思路
嵌套浮动最易忽略的一点：影响只发生在直接父容器。你漏掉任意一层，视觉崩塌就从那一层开始，而不是从最外层。逐层检查 computed height 和 outline 占位，比背清除方案更管用。
