clear: both 仅使块级元素避开前一个同级浮动元素，对非块级、脱离流或flex/grid子元素无效；失效主因是位置错误、目标非块级、无真正浮动兄弟或被高权样式覆盖。
clear: both 本身就不“清除浮动”，它只让当前块级元素避开前面的浮动；所谓“失效”，90% 是加错了位置、目标不是块级、或前面根本没有生效的浮动。
目标元素是不是块级且未脱离文档流
clear: both 对 display: inline、display: inline-block、float 元素、position: absolute 或 position: fixed 元素完全无效。它只作用于常规文档流中的块级盒。
- 检查 DevTools 的 Computed 面板，确认目标元素的
display值是block、table、flow-root等参与 BFC 的值，而不是inline - 常见陷阱：
<p></p>默认是块级，但如果父容器设了display: flex，它就成了 flex item，clear就被忽略 - 伪元素（如
::after）必须显式写display: table或display: block，content: ""不足以让它参与清除逻辑
目标元素是否真在浮动元素之后且紧邻
clear 只检查 DOM 中“前一个同级兄弟”是否浮动，中间插一个注释、空格、display: contents 容器，或任意非浮动块级元素，都会打断这个关系。
- 错误结构：
<div class="float"></div> <!-- 注释 --><div style="clear: both"></div>→ 注释导致 clear 失效 - 错误结构：
<div class="float"></div> <div>中间盒子</div> <div style="clear: both"></div>→ clear 只看前一个兄弟（即中间盒子），不往前追溯 - 用 DevTools 选中目标元素，按
Ctrl+Shift+C（或右键 → “Edit as HTML”）快速确认 DOM 顺序和空白节点
前面是否真有生效的浮动元素
clear: both 不会“修复”浮动，它只响应已实际脱离文档流的浮动兄弟。如果浮动被父容器的 display: flex 或 display: grid 抑制，或者被 overflow: hidden 裁剪但未脱离流，clear 就无从触发。
- 检查浮动元素的 Computed
float值是否为left或right，而不是none - 若父容器用了
display: flex，子元素即使写了float也无效 —— 此时clear是冗余的，该用align-items或margin控制位置 - 移动端 Safari 中，
-webkit-overflow-scrolling: touch可能导致渲染异常，使 clear 元素被错误地提升到浮动行内
有没有更高优先级样式覆盖了 clear
clear 属性被划掉，不代表没写，很可能是被更具体的选择器或 !important 覆盖了。
- 在 DevTools 的 Styles 面板里，找被划掉的
clear: both，点开那条规则，看它的选择器权重（比如#app .footer权重是 101，而你的.footer只有 10） - 第三方 UI 库常带
clear: none !important，直接压制你的规则 - 避免用
!important对抗，改用更具体的选择器，例如body .footer或.main > .footer
最易被忽略的是：clear: both 从不撑高父容器，也不影响浮动元素自身。它只是个“避让指令”。真正要解决塌陷，得靠 display: flow-root、overflow: auto 或伪元素触发 BFC —— 这些才是让父容器“看见”浮动子项的关键。别指望 clear 自己扛起整个布局修复的担子。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
