父容器高度塌陷是因浮动元素脱离文档流导致，解决核心是让父容器感知浮动子元素：推荐用 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 干净。
立即学习“前端免费学习笔记（深入）”；
示例 CSS：
.clearfix::after {
content: "";
display: table;
clear: both;
}
- ✅ 支持所有现代浏览器 + IE8+
- ✅ 不影响父容器的 overflow 行为，适合需要滚动或阴影等效果的场景
- ⚠️ 必须确保父容器是块级元素（
display: block或默认值），否则::after可能不生效 - ⚠️ 如果父容器设置了
zoom: 1（IE7 hack），可一并保留以兼容旧版 IE，但纯现代项目可省略
避免用 <div style="clear:both"></div>（过时且冗余）
在 HTML 中硬加一个空 <div> 清除浮动，虽然有效，但已不推荐：
- ❌ 污染 HTML 结构，违背“表现与结构分离”原则
- ❌ 增加无意义 DOM 节点，影响可访问性和维护性
- ❌ 在 Flexbox 或 Grid 成为主流布局后，这种“补丁式”写法更显陈旧
除非维护非常老的 IE6/7 项目且无法修改 CSS，否则不要采用。
真正容易被忽略的是：浮动塌陷问题在 Flexbox 或 Grid 布局中根本不存在——因为它们天然不依赖 float。如果你还在大量用 float 做整体布局，那问题根源可能不在“怎么清浮动”，而在“是否该换布局方式”。
