父元素高度塌陷是指子元素浮动后脱离文档流，导致父元素高度变为0、背景边框不显示及后续元素错位；可通过clear:both伪元素、overflow:hidden触发BFC或现代display:flow-root解决。
父元素高度塌陷是什么现象
当子元素浮动（float: left 或 float: right）后，父元素高度变成 0，导致背景、边框、后续元素位置错乱。这不是 bug，是 CSS 浮动的原始设计行为：浮动元素脱离文档流，父容器“看不见”它们了。
常见错误现象包括：
- 父
div的background-color不显示 - 父元素的
border塌成一条线 - 紧挨着父元素的下一个块级元素向上“窜”进浮动区域
用 clear: both 清除浮动最直接
在浮动子元素末尾加一个空元素，并设置 clear: both，能强制它下移，从而撑开父容器高度。这是最易理解、兼容性最好的方案（IE6+ 都支持）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在最后一个浮动子元素后面插入：
<div style="clear: both"></div>
- 更推荐用伪元素避免污染 HTML：
.clearfix::after { content: ""; display: block; clear: both; }然后给父元素加class="clearfix" - 注意：
clear只对块级元素生效，display: inline或未设宽高的元素无效
用 overflow: hidden 触发 BFC 是常用捷径
给父元素设置 overflow: hidden（或 auto、scroll），会触发 BFC（块级格式化上下文），让父容器重新包含浮动子元素，高度自然恢复。
但要注意副作用：
-
overflow: hidden会裁剪溢出内容（比如下拉菜单、绝对定位偏移过大的元素） -
overflow: auto在某些浏览器可能意外出现滚动条（即使内容没溢出） - 不适用于需要真实溢出可见的场景，比如 tooltip、弹层、横向滚动容器
现代方案：display: flow-root 更干净
display: flow-root 是专为解决这个问题设计的值，它创建一个新的 BFC，但不像 overflow 那样附带裁剪或滚动行为，语义清晰、无副作用。
使用条件很明确：
- 仅需支持 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+（基本覆盖所有现代浏览器）
- 不能用于 IE（IE 完全不识别该值，会退化为
display: block，此时仍塌陷） - 写法极简：
.container { display: flow-root; }
真正容易被忽略的是：很多人在调试时只改子元素，却忘了父元素才是控制高度的关键节点；还有人把 clear 错加在浮动元素自己身上——那根本不起作用，clear 必须作用于“想下移”的那个元素，通常是浮动兄弟之后的新元素或伪元素。
