浮动导致父容器高度塌陷是因浮动元素脱离文档流；clearfix通过伪元素触发BFC并清除浮动；overflow:hidden也触发BFC但会裁剪溢出内容；现代推荐display:flow-root，语义清晰且无副作用。
浮动元素导致父容器高度塌陷的典型表现
当子元素使用 float: left 或 float: right 后，父容器常常“看不见”它们的高度，表现为高度为 0 或仅包裹内联内容。这不是 bug，而是浮动的原始设计行为：浮动元素脱离普通文档流，父容器自然无法感知其尺寸。
clearfix 是什么，以及为什么它能生效
clearfix 是一种通过伪元素在父容器末尾插入并清除浮动的 CSS 技巧。它的核心是触发父容器的 BFC（块级格式化上下文），同时让伪元素承担清除职责。
常见写法如下：
.clearfix::after {
content: "";
display: table;
clear: both;
}
关键点：
立即学习“前端免费学习笔记（深入）”；
-
content: ""必须存在，否则伪元素不渲染 -
display: table（或block）确保伪元素参与布局 -
clear: both强制该伪元素下移至所有浮动元素下方 - 只对已应用
float的子元素有效；若子元素用flex或grid，无需 clearfix
overflow: hidden 为什么也能撑开父容器
overflow: hidden（或 auto、scroll）会强制触发父容器的 BFC，而 BFC 容器会包含其内部的浮动子元素，从而恢复正确高度。
但要注意：
-
overflow: hidden会裁剪溢出内容，比如下拉菜单、tooltip、绝对定位偏移过大的元素可能被截断 -
overflow: auto在不需要滚动时也可能出现空白滚动条（尤其 Safari） - 它不解决“清除浮动”的语义问题，只是副作用生效，可读性不如 clearfix
现代替代方案和容易忽略的细节
现在更推荐用 display: flow-root 替代两者，它是专为创建无副作用 BFC 而生的值：
.container {
display: flow-root;
}
优势明显：
- 语义清晰，明确表示“我要包含浮动子元素”
- 不干扰溢出行为，不会裁剪内容，也不触发滚动条
- 兼容性已覆盖 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+
老项目中如果必须支持 IE，才需回退到 clearfix；用 overflow 的话，务必检查所有可能溢出的交互组件是否被意外隐藏。
