clear: both加在父容器上完全没用，因为它只作用于自身所处的块级盒，且必须是浮动元素的同级后续兄弟元素；加在父容器上浏览器直接忽略，computed height仍为0px。
clear: both 加在父容器上为什么完全没用
因为 clear: both 只对「自身所在的块级盒」起作用，且必须是浮动元素的**同级后续兄弟元素**——它不是父容器的布局控制属性，加在父容器上浏览器直接忽略。此时 computed height 依然是 0px，背景图被截断、footer 上浮、文字重叠全由此而来。
clear: both 生效的前提条件有哪些
它不是写上就生效的样式，必须同时满足三个硬性条件：
-
clear所在的元素必须在 DOM 中位于浮动元素之后（不能靠 CSS order 或 JS 插入到前面） - 该元素必须是块级、未浮动、未脱离文档流（即不能是
float、position: absolute、display: inline） - 它得是浮动元素的**直接兄弟**，中间不能插
display: contents容器、注释节点或空文本节点
为什么伪元素 clearfix 有时也失效
常见失效原因不是写法错，而是环境破坏了前提：
- 父容器本身是
display: inline-block或display: inline，导致::after伪元素不渲染（content: ""缺失也会直接让伪元素消失） - 用了
display: block而非display: table：Safari 10.2 及更早版本中无法触发 BFC，清除失败 - 父容器设了
overflow: hidden或transform，与::after的清除逻辑冲突，视觉上仍塌陷 - 在 Flex/Grid 容器里套了
.clearfix类——它们自身已是独立格式化上下文，加了反而干扰对齐
现代项目该用什么替代 clear: both
真正要解决的是父容器高度塌陷，不是“清除”这个动作本身。优先级如下：
- 能用
display: flow-root就别碰clear：一行解决，无裁剪副作用，Chrome 64+ / Firefox 59+ / Edge 79+ 均支持 - 兼容旧浏览器时，用
.container::after { content: ""; display: table; clear: both; }，但必须确保父容器是display: block - 如果已用
display: flex或display: grid布局，float本就失效，clear和clearfix全部多余
最容易被忽略的一点：即使 clear: both 视觉上“起效”了（比如 footer 下来了），若父容器没形成 BFC，background-image 仍可能因 background-origin: padding-box 悬在塌陷区域里——这时得配 background-origin: content-box 或锚定 min-height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
