父容器高度塌陷是因浮动元素脱离文档流导致，解决核心是让父容器感知浮动子元素：推荐用 overflow: hidden 触发 BFC，或用 .clearfix::after 伪元素清除浮动；Flexbox/Grid 布局则天然避免此问题。
父容器高度塌陷是因为浮动元素脱离文档流
当子元素设置了 float: left 或 float: right，它就不再参与父容器的高度计算，导致父容器高度变为 0（尤其在没有其他非浮动内容时）。这不是 bug，是 CSS 浮动的原始设计行为——浮动本意就是让文字环绕图像，自然要“抽离”出来。
解决的核心思路只有一个：让父容器“感知”到浮动子元素的存在。常见做法不是清除浮动本身，而是触发父容器的 BFC（块级格式化上下文），或用其他方式撑开高度。
推荐用 overflow: hidden 触发 BFC（最简方案）
给父容器设置 overflow: hidden（或 overflow: auto）是最轻量、兼容性好（IE6+）、无副作用的做法。它强制父容器创建 BFC，而 BFC 容器会包含其内部浮动子元素的高度。
- ✅ 无需额外 HTML 元素，不污染语义结构
- ⚠️ 注意：如果父容器本就需要横向滚动（比如展示长表格），
overflow: hidden会裁剪溢出内容，此时改用overflow: auto更安全 - ❌ 不要写
overflow: visible——它不触发 BFC，无效
用 ::after 伪元素清除浮动（语义清晰，现代首选）
这是目前最主流、最可控的方案，通过在父容器末尾插入一个清除浮动的伪元素，视觉上“撑开”父容器，同时保持 HTML 干净。
立即学习“前端免费学习笔记（深入）”；
