浮动导航条塌陷的根本原因是float使子元素脱离文档流，导致父容器高度为0；解决方法包括触发BFC（如overflow:hidden）、使用flex布局或clearfix伪元素清除。
浮动导航条内容塌陷、父容器高度为0
这是浮动最典型的副作用：float 元素脱离文档流，导致其父容器无法自动包裹高度。常见现象是导航条看起来“悬浮”在页面上，下方内容顶上来，或者整个导航区域在开发者工具里显示高度为 0px。
根本原因不是导航条“错位”，而是父容器“不知道自己该有多高”。解决方向只有两个：让父容器重新感知浮动子元素的高度，或彻底绕过浮动布局。
- 优先用
clear清除浮动时，必须在浮动元素的**末尾插入一个清除元素**，例如： - 更推荐给父容器（如
.nav）设置overflow: hidden或overflow: auto—— 这会触发 BFC，自然包含浮动子元素，且无需额外 DOM 节点 - 注意
clear: both只对**紧邻的后续块级元素**生效，如果把它写在li上，对父容器高度无影响
position: absolute 导致导航条脱离布局流
用 position: absolute 强行把导航条“钉”在某个位置，看似解决了错位，实则埋下更大隐患：它不再占据空间，下方内容会直接上移覆盖，响应式断点也容易失效。
除非你明确需要固定定位（比如吸顶导航），否则不建议仅为了“不塌陷”而滥用 absolute。
立即学习“前端免费学习笔记（深入）”；
- 若真要用固定定位，务必配合
top/left和width显式控制，并给 body 或 header 加等高padding-top避免内容被遮挡 -
position: relative本身不脱离流，加了也没用；position: sticky是更现代的选择，但需注意兼容性（IE 不支持） -
绝对定位后，
margin和float对它完全失效，调试时容易误判
Flexbox 替代浮动是当前最稳妥的方案
现在几乎不需要靠 float 做导航条布局了。用 display: flex 既能水平排列、自动等宽/撑满，又不会塌陷，还天然支持垂直居中和响应式折叠。
- 只需给导航容器加
display: flex，子项li默认横向排列，无需float: left - 用
justify-content控制对齐（如space-between），用align-items控制垂直位置 - 老项目升级时要注意：flex 容器的
float、vertical-align和clear都会被忽略 - IE10+ 支持良好，如需兼容 IE9 及以下，才需退回 float + clear 方案
清除浮动的伪元素写法（clearfix）为什么比 clear: both 更可靠
手动加空 div 清除浮动会污染语义结构；而用 ::after 伪元素模拟清除节点，既干净又稳定。
- 标准 clearfix 写法：
.clearfix::after { content: ""; display: table; clear: both; }并给导航容器添加class="clearfix" - 必须设
display: table（或block）才能让伪元素参与块格式化上下文，display: inline无效 - 部分旧版 Safari 对
::after清除支持不稳定，此时回退到overflow: hidden更省心 - Vue/React 组件中，如果父容器是动态渲染的，伪元素可能因 CSS 加载时机问题短暂失效，建议优先用 flex
