clear: both 仅对块级元素生效，行内元素需设 display: block 才有效；该属性要求元素必须是块级盒、未浮动、未脱离文档流，且dom位置紧邻前一个浮动兄弟元素。
clear:both 只对块级元素生效，行内元素加了也白加
很多人给 <span></span>、<em></em> 或 <img> 直接加 clear: both，发现完全没反应。这不是浏览器 bug，是规范行为——clear 属性在 CSS 规范中明确要求作用对象必须是**块级盒（block-level box）**。行内元素即使设了 clear，浏览器也会静默忽略。
- 用开发者工具选中目标元素，在 Computed 面板查看
display值：如果不是block、flex、grid、table等块级 display 类型，clear就不触发 -
<img>默认是inline，加clear: both无效；需额外加display: block才能生效 <div> 虽默认块级，但如果被父容器设为 <code>display: contents或display: inline-flex，它就不再是块级盒，clear同样失效- 注意继承干扰：某个祖先元素设了
display: inline，可能通过 display 计算链影响到子元素的实际盒类型 - 检查该元素的
float值是否为none（用getComputedStyle(el).float在控制台验证） - 确认它没被设为
position: absolute或position: fixed——这两种定位也让元素脱离文档流，clear失去意义 - 避免给
clear元素套在display: flex或display: grid容器里：这些父容器本身不产生浮动上下文，clear查不到可避让的浮动兄弟 - 用开发者工具右键 → “Reveal in Elements panel”，确认加
clear: both的元素和浮动元素是否在同一个<div> 下，且它在 HTML 源码中排在浮动元素之后<li>检查浮动元素和 <code>clear元素之间有没有<!-- comment -->、换行产生的空白文本节点，或display: contents包裹层 - 典型错误结构：
<div class="sidebar"><div class="float"></div></div> <div class="main"><div class="clear"></div></div>——这里.clear和浮动不在同一父级，clear无参照物 - 首选
display: flow-root：专为此设计，无裁剪副作用，Chrome 64+ / Firefox 59+ / Edge 79+ 支持 - 兼容旧版可用
overflow: hidden，但要注意可能意外裁剪box-shadow或动画溢出部分 - 伪元素 clearfix 方案仍可用，但必须确保
::after的content非空、display为block、且未被visibility: hidden或height: 0影响渲染盒生成
clear:both 元素自己不能浮动，也不能脱离文档流
如果一个元素同时设置了 float: left 和 clear: both，clear 不会起作用。因为浮动元素已脱离标准文档流，clear 的逻辑是“让当前元素的上边界避开前一个浮动兄弟”，而脱离流的元素没有这个“避开”参照系。
DOM 位置必须紧邻浮动元素之后，且同属一个父容器
clear: both 不是全局清空所有浮动，它只看自己在 DOM 树中的**前一个同级兄弟元素**是否浮动。如果中间隔了注释、空文本节点、display: contents 容器，或者根本不在同一父级下，“紧邻”关系就被破坏。
多数人真正需要的不是 clear，而是让父容器包含浮动
写 clear: both 往往是为了防止父容器高度塌陷，但 clear 本身做不到这点。它只推下一个元素，不撑开父级。现代解法是让浮动容器自己形成 BFC：
最容易被忽略的是：clear 生效的前提是一整条文档流链路完整——从浮动元素、到它所在的父容器、再到你加 clear 的那个元素，三者都得老老实实待在标准流里，缺一不可。
