浮动导致父容器高度坍缩为0，清除浮动仅恢复高度包裹，全屏背景还需min-height:100vh或100%配合祖先height设置，移动端推荐min-height:100dvh或js动态--vh变量。
浮动布局下父容器背景色“塌陷”、背景图不铺满全屏，根本原因是浮动子元素脱离文档流，导致父容器高度坍缩为 0 —— background-color 或 background-image 只能渲染在“可见高度”内，不是 CSS 写错了，而是容器本身没撑开。
为什么清除浮动后背景还是没填满全屏
清除浮动（比如用 ::after）只解决“高度坍缩”，让父容器包裹住浮动子元素；但它不负责“占满视口”。很多开发者以为加了 clear: both 就万事大吉，结果发现背景只到内容底部，上面或下面大片留白。
-
min-height: 100vh是必须的，但要注意：移动端 Safari 中地址栏显隐会改变100vh实际值，有时突然变矮 - 更稳的做法是：
html, body { height: 100%; }+ 父容器设min-height: 100%，这样依赖继承链而非视口快照 - 如果父容器本身是
position: relative或有 padding，100%会按包含块计算，别漏掉祖先元素的 height 设置
浮动容器里用 background-size: cover 却只显示左上角
常见于直接给浮动容器设 background，但容器宽高未显式定义，或被浮动干扰导致尺寸计算异常。此时 cover 没有可靠参照系，容易退化为默认拉伸行为。
- 优先给容器加
width: 100%和min-height: 100vh（或min-height: 100%配合祖先height: 100%） - 避免用
height: 100vh—— 它是固定值，内容超出时背景会截断；min-height才是安全选择 - 若仍错位，检查是否误加了
background-attachment: fixed：它会让背景相对视口定位，而浮动容器位置可能偏移，造成视觉错位
伪元素 ::after 清除浮动 + 全屏背景的组合写法
这是目前最干净、无副作用的方案：用伪元素既清浮动，又不破坏结构；再单独控制背景层，避免样式耦合。
- 清除浮动部分必须写全：
.container::after { content: ""; display: table; clear: both; }——content: ""缺一不可，否则伪元素不生成 - 背景建议用伪元素实现（而非直接设在容器上）：
.container::before做背景层，z-index: -1确保在内容之下，且不影响清除逻辑 - 示例关键片段：
.container {
position: relative;
min-height: 100vh;
}
.container::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: url('bg.jpg') center/cover no-repeat;
z-index: -1;
}
.container::after {
content: "";
display: table;
clear: both;
}
注意：::before 和 ::after 是两个独立伪元素，不能混用一个来同时清浮动和当背景——display: table 会破坏绝对定位的覆盖能力。
移动端 Safari 的 100vh 陷阱与绕过方式
2026 年当前，iOS Safari 仍存在地址栏收放导致 100vh 动态变化的问题，尤其在页面滚动后触发重排，背景图突然“上移”或“裁切”。这不是 bug，是浏览器对“视口”定义的保守策略。
- 不要依赖
100vh做精确全屏背景，尤其当内容高度不确定时 - 用 JS 补偿：监听
resize，读取window.innerHeight并写入自定义 CSS 变量，如--vh: ${innerHeight}px，再在 CSS 中用min-height: calc(var(--vh, 100vh)) - 更轻量做法：对关键容器加
min-height: 100dvh（2024 年起已广泛支持），dvh是“动态视口单位”，比vh更稳定
浮动布局本身已逐步淘汰，但遗留项目里它和全屏背景的冲突点很集中：清浮动 ≠ 撑高度，撑高度 ≠ 背景铺满，铺满 ≠ 移动端可用——每一步都得单独验证，不能靠“看起来正常”就提交。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
