直接给父ul加display: flow-root即可修复浮动li导致的高度错乱问题，因其创建bfc使父容器正确包含浮动子项，且兼容现代浏览器、无副作用。
直接给父 ul 加 display: flow-root，就能让容器重新包裹所有浮动 li，高度错乱问题基本消失。这不是“修样式”，而是让浏览器按真实布局逻辑重新计算高度。
为什么浮动列表项高度会“错乱”
错乱不是渲染 bug，是 float 的设计本意：元素一浮动，就脱离文档流，父容器立刻“失明”——它看不到子项高度，计算出的 offsetHeight 常为 0。此时矮项右侧留白，后续项上浮钻空隙，视觉上就是换行错位、底部参差、序号消失、margin-bottom 失效。
常见误判包括：
- 以为是
li宽度没算准（其实宽度对了也没用） - 给每个
li加clear: both（这会让它们强制单列，破坏横向排列） - 在 JS 里给父容器设
style.clear = 'both'（clear对父容器自身无效）
display: flow-root 是最稳的修复方式
display: flow-root 是专为解决这类问题而生的 CSS 属性，它创建一个独立的 BFC（块级格式化上下文），让父容器强制包含所有浮动子项，且不附带副作用。
优势明显：
- 一行代码：
ul { display: flow-root; } - 不裁剪
box-shadow、position: absolute下拉菜单或transform溢出内容 - 动态插入新
li后自动重算高度，无需手动触发重排 - Chrome 64+ / Firefox 58+ / Safari 15.4+ / iOS 15.4+ 全支持
兼容性兜底可加 @supports：
ul {
display: flow-root;
}
@supports not (display: flow-root) {
ul {
overflow: hidden;
}
}
如果必须兼容老浏览器，clearfix 怎么写才不翻车
伪元素清除法仍有效，但漏掉任一关键声明就会失效。标准写法必须包含四项：
-
content: ""—— 没有内容，伪元素根本不生成 -
display: table（或block）—— inline 元素无法触发clear -
clear: both—— 清除左右两侧浮动影响 - 加在「直接包裹浮动
li」的ul上，不是外层div或nav
完整示例：
.clearfix::after {
content: "";
display: table;
clear: both;
height: 0;
}
注意：Chrome DevTools 默认不显示伪元素，需勾选 “Show user agent shadow DOM” 才能验证是否生效。
真正容易被忽略的点
就算高度修好了，float 本身还在持续影响其他行为：相邻 li 的 margin 不再合并、z-index 层级可能异常、响应式断点里因小数像素偏差突然塌陷——这些都不是孤立问题，而是同一套过时机制的连锁反应。与其花半天调 clear 和 overflow，不如把 ul 改成 display: flex 或 display: grid，连 float 都不用写了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
