目标元素必须是块级盒，clear: both 仅对 block、table 等参与 bfc 的元素生效；若 display 为 inline、flex 或 grid 子项则无效，需显式设 display: block。
目标元素是不是块级盒？
clear: both 只对块级元素生效，display: inline、inline-block、flex 或 grid 子项都无视它。哪怕写了 clear: both，computed styles 里也看不到效果。
排查方法：打开浏览器 DevTools，选中目标元素，看 display 值是不是 block、table 或其他参与块格式化上下文（BFC）的值。不是？就先加 display: block。
- 常见陷阱：给
<p></p>加clear: both却没反应——检查它是否被父级设了display: flex，导致它成了 flex item，自动失去块级流行为 - 伪元素清除必须显式写
display: table或display: block；display: inline（默认值）下clear完全不触发
它真是浮动元素的同级后续兄弟吗？
clear: both 不是“修复父容器”，而是让“当前元素”避开前面的浮动。这个“前面”指 DOM 中**紧邻的同级浮动兄弟**，中间不能插注释、空格、display: contents 容器或任何打断兄弟关系的节点。
比如：<div class="float"></div>
<!-- 注释 --><div style="clear: both"></div>，这个注释会让 clear 失效。
- 检查 HTML 结构：目标元素是否真的在最后一个浮动元素之后，且没有被包裹进另一个未清除的容器里
- 检查 computed styles：确认前面确实存在已生效的浮动元素（
float: left或right），而不是被display: flex抑制了 - 移动端 Safari 中，若父容器有
-webkit-overflow-scrolling: touch，可能触发渲染 bug，导致 clear 元素被错误地提升到同一行
你是不是把 clear 写在了错误的位置？
clear: both 写在浮动元素自己身上（.item { float: left; clear: both; }）或父容器上（.parent { clear: both; }）都无效。前者因浮动元素已脱离文档流，clear 不参与定位计算；后者因 clear 不是布局修复开关，对非浮动块级容器无语义作用。
真正该写的地方只有两个：
- 底部栏自身（如
.footer { clear: both; display: block; }），让它避开上方所有浮动 - 浮动容器末尾的伪元素（
.parent::after { content: ""; display: table; clear: both; }），模拟一个参与高度计算的块级兄弟
如果父容器用了 display: flex 或 grid，浮动子项根本不会生效——此时 clear 是无意义的，该用 align-items 或 place-items 控制对齐。
现代项目里最该盯住的其实是 BFC
clear: both 从来就不是为解决父容器塌陷而生的。它的本职是控制后续块级兄弟的位置。父容器塌陷的本质是浮动子项脱离文档流后，父容器没建立 BFC。
所以别花时间调 clear 的位置，先问一句：这一层容器是否该由自己触发 BFC？
- 支持新标准？直接上
display: flow-root，一行解决，无副作用，不新增匿名盒 - 要兼容老浏览器？回退到
overflow: auto（比hidden更安全，避免意外裁剪） - 伪元素方案看似标准，但
content: ""、display: table、clear: both缺一不可；父容器若有transform或filter，还会创建新层叠上下文，隔离清除效果
最容易被忽略的点：不是 clear 没写对，而是浮动本身不该出现在这里——Flex/Grid 布局中混用 float + clear，等于在绕开规范走路。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
