clear: both在媒体查询中常失效，因其仅作用于紧邻的、仍在文档流中的浮动兄弟元素；断点切换后浮动可能已脱离流或被flex/grid接管，导致清除目标消失。
会，而且影响很直接——清除浮动本身不是问题，问题在于它把“浮动”这个过时的布局机制硬绑在响应式逻辑里，导致断点切换时行为不可控。
clear: both 在媒体查询里为什么经常失效
因为 clear 只对紧邻的、仍在文档流中的浮动兄弟元素起作用。而响应式断点一变，float 元素可能已因宽度超限被强制换行，或被其他样式（如 display: flex）接管，此时 clear: both 就像清空气——目标不在那儿了。
- 常见现象：桌面端两栏正常，小屏下加了
clear: both却依然塌陷、错位、背景消失 - 根本原因：清除动作没匹配到实际浮动源，或者父容器已用
display: flex，float和clear都被忽略 - 验证方法：打开 DevTools，选中父容器，在 Computed 面板看
height是否为0；再看float是否还生效（有些框架会在断点里自动加float: none）
用 clearfix 时响应式断点要特别注意什么
.clearfix::after 是伪元素清除法，但它在媒体查询里套一层并不等于“自动适配”。伪元素是否渲染、是否触发 BFC，取决于父容器当前的 display 和 overflow 状态。
- 如果父容器在小屏下设了
overflow: hidden，::after可能被裁剪或不参与布局计算 - 若父容器用了
display: contents或display: grid，::after伪元素会被忽略（它无法插入到非盒模型容器中） - 嵌套浮动时，
.clearfix必须加在每一层浮动父容器上，不能只挂最外层——否则内层塌陷照旧 - 更稳妥的做法是：断点里直接给浮动父容器加
display: flow-root，它比overflow: hidden安全，不裁剪内容，且语义明确
响应式断点里该不该继续用 float + clear
不该。这不是兼容性问题，而是逻辑冲突——float 是为图文环绕设计的，不是响应式布局工具。它天然不感知视口变化，也无法自动等高、换行对齐或反向排序。
立即学习“前端免费学习笔记（深入）”；
- 正确做法：断点内显式写
float: none，而不是只加clear: both；同时重置width: 100%和margin: 0 - 如果已有
display: flex或display: grid，就彻底删掉所有float和clear相关规则——它们不仅无效，还会干扰调试 - 老项目迁移时，优先改内层模块为
display: flex，比层层加clearfix更省事、更可靠
真正容易被忽略的点是：清除浮动不是“修 bug”，而是暴露了布局模型本身的过时。断点出问题，往往不是清除没写对，而是还在用 float 做响应式这件事本身就不成立。
