父元素高度塌陷是因浮动元素脱离文档流，导致父容器无法感知其存在；常用解决方案有clear: both（需额外DOM）、BFC触发（如display: flow-root）和伪元素清除法（.clearfix::after）。
为什么父元素高度会塌陷
浮动元素脱离普通文档流，父容器无法感知其存在，导致计算高度时直接忽略所有浮动子元素。常见现象是父元素 height 变为 0，背景色、边框消失，后续元素上移覆盖——这不是 bug，是 CSS 浮动的原始设计行为。
clear: both 能解决但有局限
在父元素末尾添加一个空元素并设置 clear: both，确实能撑开高度，但需额外 DOM 节点，语义冗余，维护成本高。
- 必须放在所有浮动子元素之后，顺序错位就失效
- IE6/7 中若该清除元素自身触发 hasLayout 才可靠，常要加
zoom: 1 - 现代项目中不推荐，仅用于兼容极老环境或快速调试
<div class="container"> <div class="float-left">左浮</div> <div class="float-right">右浮</div> <div style="clear: both;"></div> </div>
BFC 是更干净的解决方案
让父元素触发 BFC（块级格式化上下文），就能自动包含内部浮动，无需额外标签。常用且安全的方式包括：
-
overflow: hidden（最常用，注意可能意外裁剪溢出内容） -
display: flow-root（推荐！专为此设计，无副作用，Chrome 58+/Firefox 57+ 支持） -
float: left或position: absolute（会改变父元素定位行为，慎用）
.container {
display: flow-root; /* 推荐：语义清晰，不影响布局 */
}伪元素清除法兼顾兼容与简洁
用 ::after 生成清除节点，避免污染 HTML 结构，同时支持 IE8+。
立即学习“前端免费学习笔记（深入）”；
- 必须设
content: ""，否则伪元素不渲染 - 需设
display: table或block，table更稳妥（避免 margin 折叠干扰） - IE8 需写成
:after（单冒号），但现代项目可统一用双冒号
.clearfix::after {
content: "";
display: table;
clear: both;
}
.container {
/* 其他样式 */
}
/* 使用时给父元素加 class="clearfix" */BFC 方案虽简洁，但 display: flow-root 在 Safari 旧版本（<15.4）仍有兼容问题；如果项目需支持 Safari 13–15.3，仍建议 fallback 到 overflow: hidden 或伪元素法。
