浮动导航塌陷是因子元素浮动脱离文档流致父容器高度为 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 推荐新项目首选——不复杂但容易忽略。
