clear: both 失效的根本原因是浮动元素与 clear 元素不在同一 bfc 中；它仅使当前元素 border-top 避开同 bfc 内前序浮动元素的外边缘，若被不同 bfc 隔离或脱离文档流则完全失效。
clear: both 失效，根本原因不是规则写错了，而是它找不到该“清除”的浮动上下文——浮动元素和 clear 元素不在同一个块级格式化上下文（BFC）里。
clear: both 只对同级、同 BFC 内的前序浮动生效
它不是全局清空所有浮动，而是让当前元素的 border-top 避开「在它之前、且在同一 BFC 中」的最后一个浮动元素的外边缘。如果浮动来自另一个 BFC（比如父容器用了 overflow: hidden 或 display: flex），或者 clear 元素自己被拉出文档流，那它就“看不见”那个浮动，自然不生效。
- 浮动元素在
.sidebar里，而.main是兄弟容器，两者都直接挂在 body 下 → 它们属于同一个 BFC（根 BFC），此时给.main加clear: both才可能起作用 - 但如果
.sidebar自己设置了overflow: auto，它就创建了独立 BFC，内部浮动对.main完全不可见 →clear: both在.main上等于没写 - 用开发者工具检查「Computed」面板里的
display和position，确认浮动元素和 clear 元素是否都在标准流中、且没有被嵌套在不同 BFC 容器内
浮动元素被父容器 BFC 截断，clear 元素完全失效
常见于组件封装场景：某个卡片组件内部用了 float: left 布局，同时又加了 overflow: hidden 防止内容溢出。这时浮动被锁死在组件自己的 BFC 里，外部加的 clear: both 根本触达不到它。
- 临时验证法：删掉组件父容器的
overflow或display: flow-root，看 clear 是否突然生效 —— 如果是，说明问题就在这层 BFC 隔离 - 不要试图在外层强行 clear，应统一由浮动元素的**直接父容器**处理：要么加
.clearfix，要么改用display: flow-root - 注意
display: flow-root在 Safari 15.4+ 才稳定支持，老版本需回退到overflow: hidden或伪元素方案
响应式断点中 clear 失效，其实是 BFC 被媒体查询意外关闭
很多项目在桌面端用 .clearfix 正常，切到移动端后塌陷 —— 往往是因为媒体查询里重写了父容器的 display 或 overflow，无意中销毁了原本的 BFC。
- 检查断点内是否写了类似
@media (max-width: 768px) { .container { overflow: visible; } }，这会关掉 BFC，让 clearfix 的::after失去作用基础 - 避免在媒体查询中只改
clear，而忽略 BFC 状态。更稳的做法是：小屏下直接float: none+width: 100%，彻底退出浮动逻辑 - 如果必须保留浮动，媒体查询中应显式补上 BFC 触发：比如
display: flow-root或overflow: hidden，而不是依赖原有样式继承
真正麻烦的从来不是写错一个 clear: both，而是浮动和 BFC 在 DOM 层级、样式层、响应式条件之间悄悄错位——这种错位不会报错，只会让页面在某个尺寸、某个浏览器、某个嵌套深度下突然“漏一块”。排查时优先看 BFC 边界，比反复调 clear 参数高效得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
