浮动元素导致父容器高度塌陷是因为其完全脱离文档流，父容器计算高度时忽略浮动子元素；清除方式包括伪元素法、overflow法和bfc触发法（推荐display: flow-root加table降级），flex/grid布局下浮动失效无需处理。
浮动元素为什么让父容器高度塌陷
因为 float 会让元素完全脱离普通文档流，父容器在计算高度时“看不见”它——不是藏起来了，是根本没参与布局计算。
常见错误现象：div 包着几个 float: left 的子块，结果父 div 高度为 0，背景色、边框全没了，下面的元素直接顶上来。
- 这不是浏览器 bug，是 CSS2.1 明确定义的行为
- 即使子元素有明确高度，只要浮动了，父容器仍按“内部无内容”处理
-
position: absolute也有类似效果，但机制不同，别混用
清除浮动的三种可靠方式及适用场景
目标就一个：让父容器重新“感知”浮动子元素的高度。别信“加个 clear: both 就行”，得看加在哪、怎么加。
- 在父容器末尾加空标签：
<div style="clear: both"></div>—— 简单直接，但污染 HTML 结构，不推荐新项目 - 给父容器设
overflow: hidden或overflow: auto—— 有效且无需额外标签，但要注意溢出内容会被裁剪（hidden）或出现滚动条（auto） - BFC 触发法：用
display: flow-root（现代浏览器）或display: table—— 语义干净，无副作用，flow-root是专为此设计的值，优先选它
display: flow-root 兼容性与 fallback 写法
display: flow-root 是目前最干净的解法，但它在 IE 和部分旧版 Android 浏览器中不支持。
立即学习“前端免费学习笔记（深入）”；
- CanIUse 数据显示：Chrome 64+、Firefox 58+、Safari 15.4+ 支持；IE 完全不支持
- 需要兼容老环境时，用
display: flow-root+display: table双写，后者作为降级（CSS 后写的会覆盖前写的，但 IE 忽略flow-root，只认table） - 别用
display: inline-block或float自身做父容器清除——会引发新的布局问题，比如换行空隙或宽度收缩
/* 推荐写法 */
.container {
display: flow-root;
display: table; /* IE fallback */
}Flex/Grid 布局下还用管浮动塌陷吗
不用。一旦父容器设了 display: flex 或 display: grid，子元素即使写了 float，也**完全失效**——浮动属性对 Flex/Grid 子项无意义，更不会导致塌陷。
- 这是规范行为，不是“意外修复”
- 但注意：别为了“清浮动”而强行把布局改成 Flex，尤其当子元素需要文字环绕等传统浮动语义时
- 如果只是想解决塌陷，又不需要浮动功能，直接换 Flex/Grid 更省心
浮动本身在现代布局中已退居次要地位，但存量代码和特定排版需求（如图文环绕）仍会遇到。真正容易被忽略的是：塌陷不是父容器“没设置高度”，而是它压根没把浮动元素纳入高度计算逻辑——这不是样式能补救的，必须从布局上下文层面干预。
