浮动导致父容器高度塌陷是因浮动元素脱离文档流，解决需让父容器重新感知高度；overflow:hidden触发BFC但会裁剪溢出内容，clearfix更可控且无副作用，现代推荐直接用flex布局。
浮动元素导致父容器高度塌陷
导航栏用 float 布局时， 这类父容器常常“看不见”子项的高度，表现为高度为 0 或远小于预期——这不是浏览器 bug，而是浮动元素脱离文档流的自然结果。
解决核心是让父容器重新“感知”浮动子元素的高度。两种主流做法：overflow: hidden 和 clearfix，但它们原理、适用场景和副作用差异明显。
用 overflow: hidden 快速修复但有风险
给父容器加 overflow: hidden 是最简方案，它会触发 BFC（块级格式化上下文），强制包含浮动子元素。
- ✅ 一行 CSS 解决，兼容性极好（IE6+）
- ❌ 如果导航栏内有下拉菜单、tooltip、弹出层等需要溢出显示的内容，会被直接裁剪
- ❌ 在某些移动端 WebKit 内核中可能引发滚动异常或 touch 事件失效
- ❌ 不是语义化清除，只是借用了 BFC 的副作用
.nav {
overflow: hidden; /* 暂时有效，但得看内容是否溢出 */
}用 clearfix 更可控更推荐
clearfix 是专为清除浮动设计的模式，不影响内容溢出，也无 BFC 副作用。现代写法推荐使用伪元素 + clear：
立即学习“前端免费学习笔记（深入）”；
- ✅ 完全不干扰布局行为，下拉菜单、过渡动画照常工作
- ✅ 可复用：定义一次，多个容器都能
class="clearfix" - ❌ 需要额外 class，比
overflow: hidden多写一点代码 - ❌ IE6/7 需要额外 hack（如
zoom: 1），但如今基本可忽略
.clearfix::after {
content: "";
display: table;
clear: both;
}然后在 HTML 中应用：
现代替代方案：别再用 float 做导航栏了
真正该思考的是：为什么还在用 float？CSS Flexbox 和 Grid 已全面支持（IE11+ 支持 flex，主流浏览器早已无兼容压力）。
-
display: flex天然不塌陷，无需清除，代码更简洁 - 响应式更易控制（
flex-wrap、justify-content等） - 浮动本就不是为导航布局设计的，强行用它只是历史惯性
.nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
margin-right: 1rem;
}如果项目必须兼容老版本 IE，那 clearfix 是当前最稳妥的选择；若能放弃 IE10 及以下，直接上 flex 更省心。浮动清除本身不是目的，让导航栏正确撑开高度才是——别把临时补丁当标准解法。
