浮动导致父容器高度塌陷是因浮动元素脱离文档流；clearfix通过伪元素触发BFC并清除浮动，需同时定义::before和::after；overflow:hidden虽简洁但有裁剪风险；现代项目推荐flex布局替代float。
浮动元素导致父容器高度塌陷的典型表现
导航条用 float: left 排列 li 或 a 后，父级 ul 或 nav 高度变成 0，背景色消失、下边框不显示、后续内容往上顶——这不是 CSS 写错了，是浮动脱离文档流的必然结果。
clearfix 是最稳妥的兼容性方案
给浮动容器（比如 ul）加一个 clearfix 类，本质是利用伪元素在末尾插入一个清除浮动的块。注意必须同时设置 ::before 和 ::after，否则 IE8 下可能失效：
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix::after {
clear: both;
}
常见坑点：
-
content: ""缺失会导致整个 hack 失效 - 只写
::after不写::before，在部分旧版浏览器中会触发 margin 折叠异常 - 不要把
clearfix直接写在li上——它得作用于浮动元素的直接父容器
overflow: hidden 更简洁但有隐藏风险
给父容器设 overflow: hidden（或 auto）也能触发 BFC，强制包含浮动子元素。优点是代码少，缺点是：
立即学习“前端免费学习笔记（深入）”；
- 如果子元素有负 margin、绝对定位偏移或下拉菜单超出容器，会被意外裁剪
- 移动端 iOS Safari 对
overflow: hidden在某些滚动场景下有兼容问题 -
overflow: auto可能意外触发滚动条（尤其在缩放或字体放大时）
适合内部结构完全可控、无溢出需求的简单导航条。
现代项目优先考虑 flex 替代 float
浮动本就不是为导航布局设计的。用 display: flex 替代 float 能从根本上避开塌陷问题：
nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
nav li { margin-right: 1rem; }
但要注意：
- IE10+ 才支持完整 flex 布局，若需支持 IE9 及以下，仍得回退到
clearfix -
flex下vertical-align和line-height对齐逻辑和 float 不同，文字垂直居中可能需要额外调整
塌陷问题看似小，但根子在文档流理解是否准确。用什么方案不关键，关键是别让 overflow: hidden 成为“不知道为啥但好像管用”的惯性操作。
