浮动导航塌陷是因子元素浮动脱离文档流致父容器高度为0；解决方法有clearfix（伪元素clear:both）和flex布局（display:flex，子项不脱离流）。
浮动导航塌陷是因为子元素浮动后脱离文档流，父容器无法感知高度，导致高度变为0。解决方法就是让父容器“重新计算”包含浮动子元素的高度。
这是兼容性最好的传统方案，在导航容器上添加一个清除浮动的类：
.clearfix::after {
content: "";
display: table;
clear: both;
}
这个伪元素会撑开父容器，强制它包裹所有浮动子项，高度就自然恢复了。
立即学习“前端免费学习笔记（深入）”；
更现代、更简洁的方式：直接让导航容器变成弹性盒子，浮动属性自动失效，且天然不塌陷：
Flex布局下，子项不再脱离文档流，容器高度始终稳定，响应式也更容易控制。
基本上就这些。clearfix适合老项目兼容，flex推荐新项目首选——不复杂但容易忽略。
以上就是css浮动导航在折叠时高度塌陷怎么办_在导航容器上使用clearfix或display:flex保持高度稳定的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
856
收藏
