背景没撑满的根本原因是父容器计算高度为0px，常见于浮动、绝对定位或Flex/Grid子元素脱离文档流导致的高度塌陷，需通过BFC触发、明确高度设置或调整布局方式修复。
背景没撑满是因为父容器高度为 0
多数情况下，background-color 或 background-image 看起来“没撑满”，根本原因是其所在元素的计算高度为 0px —— 而不是背景本身失效。常见于浮动子元素、绝对定位子元素、或 Flex/Grid 容器中子项未触发高度塌陷的场景。
浏览器渲染时，块级元素默认高度由内容撑开；一旦内容脱离文档流（如 float: left、position: absolute），父容器就可能“看不见”它们，导致高度塌陷。
- 检查目标元素的
height或min-height是否被显式设为0、auto且无内容支撑 - 用浏览器开发者工具选中该元素，看
Computed面板里的height值是否真为0 - 临时加一句
outline: 1px solid red，直观确认元素实际渲染区域
浮动子元素导致父容器高度塌陷
这是最经典的高度丢失场景：父容器内只有 float: left 的子元素，自身不参与 BFC，高度无法包含浮动流。
修复方式不是给父容器硬写 height（破坏响应性），而是让其重新建立 BFC：
立即学习“前端免费学习笔记（深入）”；
- 加
overflow: hidden或overflow: auto（兼容性好，但慎用在有下拉/弹层的容器） - 用
display: flow-root（现代方案，语义清晰，Chrome 64+/Firefox 58+ 支持） - 伪元素清除法：
::after { content: ""; display: table; clear: both; }
.container {
display: flow-root; /* 推荐 */
}
.container::after {
content: "";
display: table;
clear: both;
}Flex 或 Grid 容器里子项不占满高度
当父容器是 display: flex 或 display: grid，但子元素没有设置高度相关属性时，背景常只覆盖内容区域，而非整个容器可视区。
关键点在于：Flex/Grid 容器本身高度仍需被定义，且子项需主动“拉伸”或“继承”：
- 确保父容器有明确高度来源（如
height: 100vh、min-height: 100vh，或被上级约束） - 子项用
flex: 1（Flex）或align-self: stretch（Grid）来填满交叉轴 - 避免子项设置了
height: auto且内容为空 —— 此时它不会自动撑开
.parent {
display: flex;
min-height: 100vh;
}
.child {
flex: 1;
background: #eee;
}body/html 没设高度时全屏背景失效
想让背景铺满整个视口，却只看到顶部一小条？大概率是 html 和 body 默认高度仅包裹内容，没继承 100vh。
必须显式声明二者高度，否则子元素的 100vh 或 100% 会按 0 计算：
-
html, body { height: 100%; }是基础，但更稳妥的是min-height: 100vh - 若用
%百分比高度，上级所有祖先（包括html、body）都得有明确高度 - 注意
box-sizing: border-box不影响高度计算逻辑，但 padding/margin 会影响视觉“撑满”感
html, body {
margin: 0;
padding: 0;
min-height: 100vh;
}
body {
background: linear-gradient(to bottom, #f0f0f0, #ccc);
}背景撑不满这事，表面是样式问题，实际是高度计算链断裂。重点盯住「谁该有高度」「谁在提供高度」「谁在消费高度」这三层，比盲目调 !important 有效得多。
