浮动元素导致父容器高度塌陷，因其脱离普通文档流，父容器无法感知其存在；解决方法有二：触发bfc（推荐display: flow-root）或用::after伪元素清除浮动（需content、display、clear三者齐全）。
为什么浮动元素会让父容器高度塌陷
因为浮动元素脱离了普通文档流，父容器在计算高度时“看不见”它们，只按非浮动子元素撑开。常见现象是：父容器 background 突然截断、边框包不住内容、后续元素往上跑。
这不是 bug，是 CSS 规范对 float 的明确定义——它本就不参与父容器的高度计算。
真正要解决的，不是“让父容器强行包含”，而是“让父容器重新建立一个能感知浮动子元素的布局上下文”。核心路径只有两条：触发 BFC，或用伪元素补位。
用 ::after 伪元素清除浮动（最常用且兼容）
本质是在父容器末尾插入一个“看不见但有作用”的块级元素，并让它清除前面所有浮动。关键不在“加内容”，而在“触发清除行为”和“避免影响布局”。
立即学习“前端免费学习笔记（深入）”；
- 必须设
display: block或table，否则clear不生效 - 必须设
content: ""，否则伪元素不渲染 - 推荐用
display: table而非block，避免 IE6–7 下可能产生的 1px 间隙 - 务必加
clear: both，且不能写成clear: left或clear: right—— 浮动可能是任意方向
典型写法：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6–7 hasLayout 兼容 */
}直接触发 BFC 是更干净的解法（现代项目首选）
BFC（Block Formatting Context）能让容器重新独立计算内部布局，自动包含浮动子元素。比起伪元素，它不添加 DOM 节点，也不依赖 content，语义更清晰。
触发 BFC 的方式很多，但并非都适合清浮动：
-
overflow: hidden最常用，但会裁剪溢出内容（比如下拉菜单、阴影、定位偏移） -
overflow: auto同样有滚动风险，且 Safari 下可能意外触发滚动条 -
display: flow-root是专为此设计的值，无副作用，Chrome 64+ / Firefox 58+ / Safari 15.4+ 支持 -
position: absolute或fixed会让父容器脱离文档流，通常不是你想要的
推荐优先用：display: flow-root；兼容老浏览器时退回到 overflow: hidden，并确认没有溢出内容。
哪些方法看似能用，其实埋了坑
网上流传的某些“技巧”容易在特定场景翻车：
- 给父容器设
height或min-height：只是硬撑高，没解决塌陷本质，响应式下极易错位 - 用
<br clear="both">：HTML 污染严重，语义错误，且clear属性在 HTML5 中已废弃 - 只写
.clearfix::after { clear: both; }却漏掉display和content：伪元素不渲染，清除完全失效 - 对 flex 容器或 grid 容器套用 clearfix：它们天然不塌陷，加了反而可能干扰对齐逻辑
BFC 和伪元素不是互斥方案，而是不同抽象层级的工具——前者改容器渲染模型，后者补布局空缺。选哪个，取决于你是否愿意为兼容性妥协，以及父容器本身是否已有其他布局约束。
