结论：overflow: hidden 会截断渐变背景，因其触发 BFC 同时强制裁剪背景绘制区域；display: flow-root 是更安全的替代方案，兼容现代浏览器且不裁剪背景。
直接说结论：不是渐变本身出问题，而是 overflow: hidden 类清除方案触发 BFC 后，意外裁剪了超出容器边界的渐变渲染区域。
为什么 overflow: hidden 会截断渐变背景？
渐变（linear-gradient、radial-gradient）默认可无限延伸，但一旦父容器设置 overflow: hidden，浏览器会严格按盒模型边界裁剪所有内容——包括背景图像的绘制区域。即使渐变是通过 background 设置的，它仍受容器溢出策略约束。
-
background-clip默认为border-box，但裁剪范围由overflow决定，不是由background-clip单独控制 - 如果渐变起点在容器外（比如
background-position: -50px -50px），或使用大半径的radial-gradient，overflow: hidden会直接切掉边缘色块 - 这种截断在开发者工具中不可见，因为盒模型高亮只显示 content/border/padding，不反映背景实际绘制范围
display: flow-root 是更安全的替代方案
它同样触发 BFC，让父容器正确包裹浮动子元素，但不会引入任何裁剪行为——背景照常渲染，滚动条不出现，transform 位移也不被限制。
- 兼容性：Chrome 64+、Firefox 61+、Safari 12.1+、Edge 79+；IE 完全不支持
- 写法简洁：
.container { display: flow-root; }，无需伪元素或额外标签 - 注意：它会改变盒类型（变成 formatting context root），
vertical-align对其无效，且不能与table-cell混用
伪元素 ::after 清除法在渐变场景下的表现
只要伪元素不干扰布局流，就不会影响背景渲染。但需确保它不意外覆盖渐变区域（比如设置了 background 或 z-index）。
- 推荐写法：
.clearfix::after { content: ""; display: table; clear: both; } - 避免加
height: 0或font-size: 0——某些旧版 Safari 会对零高伪元素做异常渲染 - 如果容器本身有
background-image，伪元素的display: table不会触发新层叠上下文，不影响渐变叠加
真正容易被忽略的是：清除浮动从来不是为了“让父容器有高度”，而是为了让它能**可靠地参与后续布局计算和视觉渲染**。渐变截断只是表象，背后是 overflow 和 BFC 触发方式对渲染管线的深层干预——别只盯着 float，得看清楚谁在裁剪、谁在撑开、谁又在悄悄重绘。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
