clear: both 应加在浮动元素之后、需避开它们的块级兄弟元素上，如页脚；加在浮动元素自身、父容器、内联元素或中间插入其他元素均无效，且 flex/grid 容器中 float/clear 被忽略。
clear: both 应该加在哪个元素上？
它必须加在浮动元素之后、需要避开它们的那个块级兄弟元素上，不是加在浮动元素自己身上。比如两个 float: left 的卡片并排后，你想让页脚不被顶上去，就给 <footer> 加 clear: both；给卡片自己加，只会让它往下掉一截，破坏并排布局。
常见错误包括：
- 加在父容器上——它不是浮动元素的兄弟，浏览器直接忽略
- 加在
<img>或<span>上——clear只对块级盒生效，内联元素无效 - 加在浮动元素和目标元素之间插了另一个非浮动
<div>——“紧邻”关系中断，clear不再起作用
为什么加了 clear: both 还是没效果？
最常因为 DOM 结构或显示类型不满足前提条件。用开发者工具确认两点：
- 目标元素是否和浮动元素在同一个父容器下，且 HTML 源码中紧随其后（中间不能有注释、空文本节点、
display: contents包裹层） - 目标元素的
computed display值是否为block、table等块级类型；inline-flex、grid、contents都会让clear失效 - 父容器是否用了
display: flex或display: grid——此时子元素的float和clear全部被忽略，这是规范行为，不是 bug
clear: left 和 clear: both 有什么实际区别？
不是“力度不同”，而是触发条件和留白逻辑不同：
立即学习“前端免费学习笔记（深入）”；
-
clear: left：只等左侧没有float: left元素就停，右侧有浮动也不管——适合单左浮侧边栏后接正文 -
clear: both：左右都得空才开始渲染，哪怕页面只有左浮，它也会多等一段“右侧安全区”，造成额外空白 - 如果浮动元素只有一侧（比如仅
float: left），用clear: left更精准，避免无谓下移
现代项目里更推荐什么替代方案？
真正要解决的往往不是“文字不下沉”，而是“父容器高度塌陷”。clear: both 只推位置，不撑高父容器；而 display: flow-root 能触发 BFC，让父容器自动包裹浮动子项，DOM 动态变化时也稳定有效。
响应式或打印场景中尤其明显：clear 在 @media print 中常被忽略，但 display: flow-root 仍能保持结构；Flex/Grid 布局则从源头绕开浮动语义，彻底规避这类问题。
容易被忽略的是：浮动干扰的本质是文档流断裂，不是样式写错了——所以加再多 clear，只要父容器没形成 BFC，后续插入新内容或字体加载延迟，还是可能出错。
