渐变背景不显示是因为父元素高度塌陷为0px；浮动子元素脱离文档流，父容器无法感知其高度，导致background-image无渲染空间，display: flow-root可触发BFC并包含浮动高度。
渐变背景不显示，不是渐变写错了，是父元素高度塌陷为 0px，background-image（包括 linear-gradient）根本没渲染空间。
为什么 linear-gradient 在浮动父容器里“消失”
浮动子元素脱离文档流，父容器计算高度时完全忽略它们。即使子元素各自高 300px，父容器的 computed height 仍可能是 0px。而 background: linear-gradient(...) 是作用于整个盒模型内容区的——高度为 0，就等于只画在一条不可见的线上。
常见误判点：
- 检查 DevTools 的 Computed 面板，确认
height真的是0px - 误以为是渐变语法错误，其实
background: linear-gradient(to right, red, blue)在控制台里能正常预览 - 给父容器加了
padding却没加background-clip，导致渐变只出现在 padding 区，内容区仍是透明
display: flow-root 是最直接有效的修复方式
它专为解决这类问题设计：触发 BFC，强制父容器包含浮动子元素高度，且不裁剪 position: absolute 子元素、不干扰 box-shadow 或圆角。
立即学习“前端免费学习笔记（深入）”；
实操要点：
- 直接加在浮动子元素的**直接父容器**上：
.parent { display: flow-root; background: linear-gradient(...); } - 不能和
position: absolute同时用在一个元素上——后者会让flow-root失效 - 若父容器原本是
inline或inline-block，需先确保它是块级：display: block再设flow-root - 兼容性已足够：Chrome 64+、Firefox 62+、Safari 15.4+、Edge 79+ 均原生支持；IE 完全不支持
伪元素清除法（.clearfix::after）容易失效的几个硬伤
很多人复制代码却没效果，问题往往出在细节缺失：
-
content: ""必须存在，缺了就根本不生成伪元素 -
display必须是table或block；display: table更稳妥，可避免 margin 折叠异常 -
clear: both只对后续浮动生效，所以伪元素必须放在所有浮动子元素之后——也就是写在::after里才天然满足 - 类名必须加在**直接父容器**上，如果套了多层 wrapper，只清外层没用
- DevTools 默认不展开伪元素样式，需手动点击 Styles 面板里的
::after节点确认是否激活
别踩 overflow: hidden 的隐性坑
它确实能撑开高度，但副作用真实存在：
- 会裁剪
position: absolute子元素（如下拉菜单、tooltip），尤其当父容器还有border-radius时，裁剪边界可能和视觉预期不符 - 如果父容器本身是
display: inline-block或table-cell，overflow属性不触发 BFC，加了也白加 -
overflow: auto不行——它不触发 BFC，哪怕只溢出 1px 也会意外出现滚动条 - 若父容器设置了固定
height或max-height，BFC 的自动撑高能力会被覆盖，渐变依然被截断
真正卡住人的，往往不是“怎么让渐变显示”，而是撑开之后忘了检查父容器是否有可靠的高度锚点：比如图片加载延迟、字体尚未回退、或 margin 折叠压缩了可用空间。用 DevTools 的 Layout 面板逐层看 computed height 和 offsetHeight，比猜更管用。
