display: flow-root是清除浮动导致导航栏高度塌陷的首选方案，它通过创建bfc使父容器包含浮动子元素，无裁剪、不干扰定位，兼容现代浏览器；ie11需用@supports回退overflow:hidden。
直接加 display: flow-root 到导航容器上，90% 的情况立刻生效；若需兼容 IE11，用 @supports 回退到 overflow: hidden。
为什么导航栏高度变成 0 了
浮动的 .nav-item 或 li 脱离文档流，父容器（比如 .nav 或 ul）完全感知不到它们的高度。你看到的“背景色消失”“下方内容上移”，本质都是父容器 offsetHeight === 0 导致的——不是样式写错了，是 CSS 布局机制在按规范运行。
常见误判点：
- 以为加
position: relative就能撑高（它不触发 BFC，无效） - 把
clear: both写在li上（清除的是兄弟元素，对父容器高度无影响） - 用
padding-top硬撑（视觉上像好了，但 computed height 仍是 0，后续margin-collapse或定位仍会出问题）
现代项目首选 display: flow-root
这是 CSS 为解决浮动塌陷专门设计的值，语义明确、无副作用：
- 一行生效：
.nav { display: flow-root; } - 不裁剪溢出内容（下拉菜单、tooltip、阴影全保留）
- 不干扰
position: fixed或z-index层叠（移动端 Safari/安卓 WebView 安全） - 无需伪元素，避免重排开销，动画和滚动更顺滑
支持情况：Chrome 58+ / Firefox 57+ / Safari 10.1+，2026 年绝大多数项目可直接用。
需要兼容 IE11 怎么办
overflow: hidden 兼容性最好（IE6+），但它会意外裁剪 position: absolute 的下拉菜单、box-shadow 或 transform 移出的 tooltip。安全做法是用 @supports 降级：
.nav {
display: flow-root;
}
@supports not (display: flow-root) {
.nav {
overflow: hidden;
}
}
这样现代浏览器走 flow-root，IE11 自动 fallback，且不会混用导致裁剪风险。
别再用 clearfix 伪元素了？
如果项目必须兼容老浏览器（如 IE9），.clearfix::after 仍可用，但要注意：
- 必须加在直接父容器上（比如
ul.nav，不是外层div） - 漏掉
content: ""，伪元素根本不渲染，clear形同虚设 - 父容器同时设了
overflow: hidden和clearfix，后者会被覆盖，且裁剪风险仍在
最易被忽略的一点：就算高度修好了，浮动本身还在影响其他行为——比如相邻 li 的 margin 不再合并，z-index 层级可能异常。如果只是做导航栏，display: flex 替代浮动才是更干净的解法，连 float 都不用写了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
