浮动导航塌陷是因子元素浮动脱离文档流致父容器高度为0；解决方法有clearfix（伪元素clear:both）和flex布局（display:flex，子项不脱离流）。
浮动导航塌陷是因为子元素浮动后脱离文档流，父容器无法感知高度，导致高度变为0。解决方法就是让父容器“重新计算”包含浮动子元素的高度。
用clearfix清除浮动
这是兼容性最好的传统方案，在导航容器上添加一个清除浮动的类：
- 给导航容器（比如nav或.navbar）加上class="clearfix"
- CSS中定义：
.clearfix::after {
content: "";
display: table;
clear: both;
}
这个伪元素会撑开父容器，强制它包裹所有浮动子项，高度就自然恢复了。
立即学习“前端免费学习笔记（深入）”；
改用display:flex布局
更现代、更简洁的方式：直接让导航容器变成弹性盒子，浮动属性自动失效，且天然不塌陷：
- 移除所有float声明（如float: left）
- 给容器设置：display: flex;
- 用justify-content控制菜单项水平排列（如space-between或flex-end）
- 用align-items: center垂直居中文字和图标
Flex布局下，子项不再脱离文档流，容器高度始终稳定，响应式也更容易控制。
其他注意事项
- 如果用了overflow: hidden来触发BFC，也能防止塌陷，但可能意外裁剪下拉菜单，慎用
- 避免同时混用float和flex，逻辑冲突易出问题
- 折叠/响应式切换时，确保移动端的display: none或transform不会干扰父容器高度计算
基本上就这些。clearfix适合老项目兼容，flex推荐新项目首选——不复杂但容易忽略。
