背景颜色未消失而是父容器高度塌陷为0px：浮动元素脱离文档流致父容器无法感知其存在，故height计算为0；可用display:flow-root触发BFC彻底解决，无裁剪副作用，现代浏览器兼容良好。
背景颜色没消失，是父容器高度塌陷成了 0px —— 浮动元素脱离文档流，父容器压根“看不见”它们，自然不撑高，背景也就没地方画。
为什么 float 会让父容器 height 变成 0
浮动元素（float: left 或 float: right）会从普通文档流中抽离，不再参与父容器的高度计算。哪怕子元素各自高 200px，只要父容器内部没有其他非浮动内容（比如纯文本、div 等块级元素），它的 computed height 就可能为 0。
常见现象包括：
-
background-color设置了但页面上完全不显示 - 后续兄弟元素向上“塌陷”，紧贴在浮动区域上方
- 开发者工具里看到该父元素的
offsetHeight是0或极小值
overflow: hidden 为什么能“修好”背景色
它不是在“清除浮动”，而是触发了 BFC（块级格式化上下文）。BFC 容器必须包含其内部的浮动子元素，并据此重新计算自身高度。
立即学习“前端免费学习笔记（深入）”；
但要注意副作用：
-
position: absolute子元素超出父边界时会被裁剪（如下拉菜单、tooltip） -
box-shadow若落在父容器外，也会被一并砍掉 - 父容器本该支持滚动（如内容超长），
overflow: hidden会把滚动条干掉 - 对
inline元素无效，必须先确保父容器是display: block或display: inline-block
display: flow-root 是更干净的现代解法
它是专为解决这类问题设计的 CSS 属性，同样触发 BFC，但不附带溢出裁剪行为：
- 绝对定位子元素照常溢出
- 阴影照常渲染
- 滚动逻辑也不受影响
- 兼容 Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+
- 写法就是：
display: flow-root替掉overflow: hidden，其他样式不动
真正麻烦的从来不是加哪行 CSS，是加完之后没验证：下拉菜单还在不在？阴影有没有被切掉？滚动条还能不能拉？有没有某个 transform 动画突然被截断？这些细节往往要等用户反馈才暴露。
