导航栏高度消失不是“没设置高度”，而是父容器压根没感知到浮动子项的存在——直接设 height 只能临时遮掩问题，治标不治本。
为什么给父容器加 height 会失效或难维护
浮动的 li 元素脱离文档流，父 ul 或 nav 计算高度时只看非浮动内容（比如空文本节点），结果是 offsetHeight === 0。此时硬写 height: 50px 看似恢复了背景和边框，但：
- 内容增多（如多一行文字、图标变大）就会溢出，或需要反复调数值
-
margin-bottom仍可能与后续元素合并，导致间距错乱 - 响应式场景下，
height值无法随字体缩放、行高变化自适应
真正起效的修复必须让父容器“重新包含”浮动项
核心是触发 BFC（块级格式化上下文），让父容器重新计算包含浮动子项的高度。可行路径有三条，按推荐顺序：
-
display: flow-root：一行 CSS，无裁剪副作用，Chrome 58+/Firefox 57+/Safari 10.1+ 均支持，现代项目首选 -
overflow: hidden：兼容性最好（IE6+），但会意外裁剪position: absolute下拉菜单、box-shadow或transform移出的 tooltip -
.clearfix::after伪元素：需两段代码（类名 + 伪元素规则），但语义清晰、不影响溢出，适合需兼容老浏览器的项目
别踩这些常见坑
很多人试过但失败，往往卡在细节：
- 把
clear: both直接加在父元素上——它对父容器高度计算完全无效，clear只控制自身位置，不作用于子项 - 伪元素漏了
content: ""——没有内容，伪元素根本不渲染，clear形同虚设 - 父容器同时设了
overflow: hidden和clearfix——后者被前者覆盖，且裁剪风险仍在 - 浮动的是
a标签而非li，但clearfix类却加在了外层div上，没加到ul这个直接父容器
最易被忽略的一点：就算高度修好了，浮动本身还在影响其他行为——比如相邻 li 的 margin 不再合并，z-index 层级可能异常。如果只是做导航栏，display: flex 替代浮动才是更干净的解法，连 float 都不用写了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
