ul高度为0是浮动脱离文档流的必然结果：float:left使li脱离文档流，ul无法感知其尺寸，导致高度坍缩、背景不显、后续元素上移；应优先用display:flow-root触发无副作用BFC，或伪元素clearfix兼容旧浏览器。
ul高度为0是浮动脱离文档流的必然结果
不是代码写错了，是float的机制决定的：float: left会让每个li脱离普通文档流，父级ul就“看不见”它们了，自然无法计算高度——开发者工具里看到ul高度是0px、背景色不显示、下方内容顶上来，全是因为这个。
居中失败也源于此：没有高度，text-align: center对ul本身无效；想靠margin: 0 auto居中ul，前提是它得有明确宽度且是块级元素，但高度坍缩常伴随宽度计算异常（比如ul默认padding-left: 40px没清），进一步破坏居中逻辑。
别用overflow:hidden硬撑高度
给ul加overflow: hidden确实能触发BFC、让高度恢复，但它会裁剪所有溢出内容——下拉菜单、box-shadow、transform移出边界的子项，全被砍掉。这不是修复，是掩盖问题。
-
overflow: auto在旧版Safari/IE可能意外触发滚动条 -
overflow: hidden+position: relative组合，有时连z-index分层都受影响 - 现代项目里，这个方案已退居备用位，仅用于兼容IE8等极老环境
推荐用display: flow-root或伪元素clearfix
display: flow-root是专为解决这类问题设计的CSS属性，它创建一个无副作用的BFC，ul既能包裹浮动li、恢复高度，又不会裁剪任何内容。Chrome 64+、Firefox 61+、Safari 15.4+ 全支持，新项目直接上。
若需兼容稍老浏览器（如Chrome 58+），用伪元素::after更稳妥：
.nav-ul::after {
content: "";
display: table;
clear: both;
}
注意两点：
- 不要写成
.nav-ul:after（单冒号是IE8兼容写法，但现代项目无需） - 别漏掉
content: ""——没这个，伪元素不渲染，清除失效
居中要分两层处理：ul自身 + li排列
ul容器居中和li内容居中是两个事，混在一起容易错：
- 让
ul在页面中水平居中：ul.nav-ul { margin: 0 auto; width: fit-content; }或设固定宽+auto外边距 - 让内部
li在ul里居中排列：不用float，改用display: flex; justify-content: center;—— 这比浮动+居中计算可靠得多 - 如果坚持用浮动，
text-align: center必须加在ul上，且所有li不能设float以外的定位干扰（比如position: absolute）
真正麻烦的点不在“怎么写”，而在“为什么写了没反应”——往往卡在ul默认padding-left没重置、box-sizing还是content-box、或者伪元素的display值写成了inline。这些细节一漏，整个布局就静默失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
