clear: both加在浮动元素自身或父容器上均无效，因其仅对紧跟浮动元素后的非浮动块级兄弟元素生效；伪元素清除需同时满足content: ""、display: table和clear: both；现代推荐用display: flow-root触发bfc解决塌陷。
clear: both 为什么加在浮动元素自己身上没反应
它根本就不是设计来“作用于浮动元素自身”的。浏览器在计算 clear 时，只检查该元素**前面的同级浮动兄弟元素**，而浮动元素已脱离文档流，clear 对它自身的定位逻辑不参与计算。比如写 .item { float: left; clear: both; }，computed styles 里根本看不到 clear 生效，等同于没写。
clear: both 加在父容器上为什么被忽略
clear 是一个**仅对块级盒生效的定位控制属性**，不是布局修复开关。父容器若未浮动、也非块级格式化上下文（BFC）触发者，clear: both 在它身上语法合法但语义无效——浏览器直接跳过，不报错也不执行。真正需要的是让父容器“感知”子项高度，而不是给它加 clear。
伪元素清除法 ::after 为什么看似写了却失效
常见失效不是因为写法错，而是三个条件缺一不可：
-
content: ""缺失或写成content: " "（带空格）——前者不生成伪元素，后者可能因行高撑出意外高度 -
display没设或设为inline——伪元素默认是inline，clear对它完全不触发；必须显式写display: table（比block更稳，兼容性好且不继承 line-height） - 父容器本身有
transform、filter或will-change——这些会创建新层叠上下文，隔离clear行为，导致伪元素“清了但没清到”
现代项目里最容易被忽略的底层矛盾
clear: both 从来就不是为“解决父容器塌陷”而生的，它的本职是“让后续块级兄弟避开浮动”。父容器塌陷的本质是**浮动子项脱离文档流后，父容器无法建立 BFC**。所以真正要盯住的，不是怎么写 clear，而是判断：这一层容器是否该由自己触发 BFC？用 display: flow-root 还是回退到 overflow: hidden？有没有被 Flex/Grid 容器意外包裹导致浮动根本没生效？这些责任边界划错了，后面所有 clear 都是在补漏洞。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
