浮动导致父容器高度塌陷使背景渐变不可见，需先用clearfix等方法清除浮动撑开容器高度，再设置linear-gradient等背景样式。
浮动元素导致父容器高度塌陷，背景渐变不显示
这是浮动布局最经典的问题：父容器没有设置高度，内部全是 float: left 或 float: right 的子元素，导致父容器计算高度为 0。此时哪怕你写了 background: linear-gradient(...)，也只在「视觉上高为 0」的区域渲染，根本看不到渐变效果。
关键不是“怎么加渐变”，而是“怎么让容器先有高度”。渐变只是锦上添花，撑开才是前提。
- 别依赖
height或min-height硬写死——内容长度不确定时会出界或留白 - 别用
overflow: hidden以外的overflow值（如auto），某些浏览器下仍可能塌陷 -
display: flow-root是现代解法，但 IE 完全不支持，老项目慎用
clearfix 方案：兼容性最好，推荐用于生产环境
给父容器添加一个类（比如 clearfix），用伪元素清除浮动。它不改变布局流，不影响渐变渲染位置，且 IE8+ 全支持。
.clearfix::after {
content: "";
display: table;
clear: both;
}
使用时只需：<div class="container clearfix">...浮动子元素...</div>，然后放心写你的渐变：
立即学习“前端免费学习笔记（深入）”；
.container {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
- 必须用
::after（双冒号），单冒号在 IE8 中仅部分支持伪元素 -
display: table比block更稳妥——避免某些行内元素场景下清除失效 - 不要同时加
zoom: 1（IE hack）除非明确需要支持 IE6/7；现代项目可省略
float 元素本身设 height 或 min-height 会破坏布局逻辑
有人试图给浮动子元素加 min-height: 200px 来“撑高”父容器，这是误区。浮动元素脱离文档流，父容器不会根据它们的高度自动扩展——哪怕子元素自己很高，父容器依然塌陷。
验证方法很简单：在父容器加个红色边框 border: 1px solid red，刷新页面看是否包住子元素。如果没包住，说明还没真正撑开。
- 浮动子元素的
height只影响自身，不影响父容器高度计算 - 若子元素含图片，记得给
img加vertical-align: top，否则底部可能多出几像素空白，干扰高度判断 - 用
float+display: inline-block混用会进一步加剧高度计算异常，尽量避免
渐变背景延伸需注意 overflow 和 box-sizing
即使容器被成功撑开，渐变也可能被截断——常见于设置了 overflow: hidden 却忘了内容有内边距或圆角。
典型踩坑点：
-
box-sizing: border-box没设，导致padding外扩，渐变从边框内侧开始，看起来像“没延伸到边缘” - 父容器有
border-radius但没配overflow: hidden，圆角处渐变溢出（或相反：加了overflow: hidden却把渐变裁掉了） - 渐变方向写成
to bottom，但子元素是横向浮动，实际高度很小，渐变几乎不可见——建议改用角度值如135deg或配合background-size控制重复范围
稳妥写法示例：
.container {
box-sizing: border-box;
padding: 20px;
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
background-size: 200% 200%;
}
浮动布局本身正在被 Flex 和 Grid 替代，但如果还在维护老项目，记住：清除浮动不是“附加技巧”，而是浮动布局的必要基础步骤。渐变再炫，也得先让容器有高度——否则它连渲染机会都没有。
