display: flow-root 是解决浮动子元素导致父容器高度塌陷的首选方案，它触发BFC使父容器正确包含浮动元素并计算高度，且无裁剪副作用。
直接加 display: flow-root 到父容器，背景色立刻显示——这是现代项目里最干净、副作用最小的解法。
为什么父元素 background-color 看不见
不是样式没生效，是父元素的 height 被浏览器算成了 0px。所有子元素设了 float: left 或 float: right 后，就脱离文档流，父容器“看不见”它们的高度，自然撑不开。用开发者工具看 Computed > height，大概率是 0。
- 常见于导航栏（
<nav>或<ul>包着一堆float: left的<li>） - 后续兄弟元素会向上塌陷，紧贴浮动内容下方，这是连带现象
-
background-image同样失效，原理一致
display: flow-root 是首选方案
它专为解决这类问题设计：触发 BFC（块级格式化上下文），让父容器重新包含浮动子项，从而正确计算高度，且不附带裁剪副作用。
- 写法极简：
.nav { display: flow-root; } - 兼容 Chrome 64+ / Firefox 58+ / Safari 15.4+ / Edge 79+，2026 年主流项目可放心用
- 不会裁掉
position: absolute下拉菜单、box-shadow、transform位移内容 - 不能和
position: absolute同时用在一个元素上——后者会让flow-root失效 - 若父容器原本是
inline或inline-block，需先加display: block
clearfix 伪元素还在用？注意三个硬条件
如果必须兼容 IE11 或旧版 Safari，::after 清除仍是可行方案，但漏掉任一条件就失效。
立即学习“前端免费学习笔记（深入）”；
-
content: ""必须写，不能省略或留空格 -
display: table比display: block更稳妥，避免 margin 折叠异常 -
clear: both必须加，且父容器自身不能是display: inline或被overflow: hidden锁死高度 - 最小可靠写法：
.clearfix::after { content:""; display: table; clear: both; }
慎用 overflow: hidden
它确实能触发 BFC 让高度恢复，但副作用真实存在，调试时容易忽略。
-
overflow: hidden会裁剪溢出内容：下拉菜单、tooltip、box-shadow、圆角阴影都可能被砍掉 - 若父容器本该支持滚动（比如内容超长），
hidden会让滚动条彻底消失 - 对
inline元素无效，必须先确保它是块级（如加display: block） - 如果父容器同时有
max-height或固定height，BFC 的自动撑高能力会被覆盖
真正卡住人的，往往不是“怎么闭合高度”，而是闭合之后忘了检查父容器是否还有可靠的尺寸锚点——比如图片加载延迟、字体未就绪、或 margin 折叠意外压缩了可用高度。修复后务必用开发者工具确认 offsetHeight 和 computed height 是否已非零。
