clear本身不撑高父容器，真正起作用的是加在浮动元素后的块级清除元素（如），它参与文档流并贡献高度，使父容器获得可绘制高度，背景才得以显示。
clear 本身不会影响背景，它只控制元素在浮动元素之后的定位位置；真正让背景“回来”的，是 clear 强制插入的那个参与文档流的块级元素，间接撑开了父容器高度。
clear: both 必须加在非浮动元素上才有效
常见错误是把 clear: both 加在浮动元素自己身上，或者加在父容器上——这两者都无效。因为：
-
clear是给「仍处于文档流中的块级元素」用的，浮动元素已脱离流，clear对它没意义 - 父容器若没内容撑高，加
clear也无处生效；它不触发 BFC，也不参与高度计算 - 真正起作用的是：在最后一个浮动子元素后面，放一个
display: block且带clear: both的元素（比如<div class="clear"></div>），它会强制下移、占据新行，并把父容器底部拉下来
为什么加了 clear 后父容器背景就显示了
这不是 clear “修复”了背景，而是它引入了一个新的、有高度的文档流元素，让父容器终于能算出自身高度了。关键点：
- 浏览器渲染背景的前提是父容器有「可绘制的高度」，而这个高度必须来自文档流内的内容
- 那个
clear: both的元素虽然视觉上可能“空”，但它默认是display: block，有行盒（line box）和高度（哪怕只有line-height贡献的几像素） - 只要父容器内有一个非浮动、非空、参与高度计算的元素，它的
height就不再为0px，background-color / background-image 就能正常绘制
现代项目里别靠 clear 撑高父容器
用 clear 配合空标签或伪元素来“骗”高度，本质是补丁式写法。容易踩的坑包括：
- 如果清除元素被设为
display: none或visibility: hidden，高度立刻消失，背景又没了 - 伪元素用
display: table虽然可靠，但在某些老版 Safari 中可能引发重绘异常 - 响应式场景下，清除元素的位置可能随断点变化而错位，导致清除失效
- 更根本的问题：你本不该依赖浮动做整体布局 ——
display: flex或display: grid下，父容器天然包含子项，clear完全无用武之地
真正要盯住的，是父容器 computed height 是否为 0px。只要它是 0，不管 background 写得多对，都看不见——这不是样式问题，是渲染前提缺失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
