clear: both 仅对浮动元素后处于标准流中的块级兄弟元素有效，因浮动元素已脱离文档流，其自身、父容器或行内元素上设置均无效；正确使用需同时满足：块级、同父、紧邻且未脱离文档流。
clear: both 只有加在浮动元素之后、且处于标准文档流中的块级兄弟元素上才有效。加在浮动元素自己身上、父容器上，或者 inline 元素上，浏览器直接忽略，不报错也不起作用。
为什么加在浮动元素自己身上完全没反应
浮动元素已脱离文档流，clear 的计算逻辑只针对仍在文档流中、且是块级的兄弟元素。浏览器压根不拿它当“清除对象”处理：
-
float: left的元素设clear: both，computed styles 里根本看不到生效痕迹 - 即使它视觉上“掉下来”了，那也是 float 自身行为（比如因换行或空间不足）导致，不是
clear在起作用 - DOM 中它前面没有同级浮动兄弟（它是第一个），
clear失去参照，自动失效
正确位置：必须满足三个硬性条件
要让 clear: both 触发下移，目标元素必须同时满足：
- 是块级元素（
display: block、table、flow-root等，不能是inline或inline-block） - 和浮动元素在同一个父容器内，且在 HTML 源码中紧接其后（中间不能插其他块级元素）
- 本身未脱离文档流（不能是
position: absolute、fixed，也不能被display: contents包裹）
✅ 正确示例：
<div class="item" style="float: left"></div><br><div class="item" style="float: right"></div><br><p style="clear: both">我被推到所有浮动下方</p>
父容器上写 clear: both 是语法合法但语义错误
父容器不是浮动元素的“兄弟”，而是“祖先”。clear 不作用于祖先节点，浏览器静默跳过该声明：
-
.parent { clear: both; }不会撑开高度，也不会影响子项布局 - 想解决父容器塌陷，该用
display: flow-root或overflow: hidden触发 BFC，而不是靠clear - 伪元素清除法（
::after）之所以能“看起来有效”，是因为它在父容器内部插入了一个满足三条件的块级兄弟元素
现代项目里最容易被忽略的底层事实
clear: both 从来就不是为修复父容器塌陷而设计的。它的唯一职责是：让**当前这个块级元素**的上边界避开前面的浮动兄弟。如果你发现加了 clear: both 后页脚下来了但父容器还是高度为 0，说明你真正该动的是父容器的格式化上下文，而不是在兄弟元素上反复调试 clear 的位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
