clear属性只对块级元素生效，因其依赖bfc中明确定义的上边框边界进行垂直定位计算；内联元素无此边界，display非block/table/flow-root/flex/grid时均无效。
clear 属性为什么只对块级元素生效
因为 clear 的作用机制依赖于「上边框边界（top border edge）」的垂直定位计算，而这个边界只在块级格式化上下文（BFC）中被明确定义。内联元素（如 <span></span>、<em></em>）没有独立的块级边界概念，浏览器直接忽略其 clear 声明。
即使你写了 clear: both，只要元素的 display 值不是 block、table、flow-root、flex 或 grid，它就不会起效。用开发者工具检查 Computed 面板里的 display 值，就能快速验证是否满足前提。
display: inline-block 也不行——它虽生成盒，但不触发 BFC，且仍受行内上下文约束，clear 静默失效。
哪些元素加了 clear 也无效
以下情况会让 clear 完全被跳过，不是写错了，而是布局上下文不支持：
- 元素自身设置了
float: left或float: right—— 已脱离文档流，无「前一个浮动兄弟」可参照 - 元素是
position: absolute或position: fixed—— 同样脱离文档流 - 父容器用了
display: flex或display: grid—— 规范明确禁止在弹性/网格上下文中使用clear - DOM 中插入了注释节点
<!-- -->或空文本节点，破坏了「紧邻同级兄弟」关系
比如浮动元素在 .sidebar 里，clear 元素在 .main 里，二者父容器不同 → 无参照物，无效。
clear 应该加在谁身上才真正起作用
必须加在「浮动元素之后、同一父容器内、处于标准文档流中的块级兄弟元素」上。它不是清除浮动本身，而是让当前元素的上边界避开前面浮动元素的底部边界。
常见有效写法：
-
<p style="clear: both">正文内容</p>—— 浮动图片后紧跟的段落 -
<div class="clearfix"></div>，配合 CSS：.clearfix { display: block; clear: both; } - 伪元素方案：
.parent::after { content: ""; display: table; clear: both; }—— 这个display: table确保它是块级盒
错误写法：<div style="float: left; clear: both"></div> —— 对自己加 clear 毫无意义，浏览器根本不计算。
现代布局中更推荐的替代方案
单纯靠 clear 容易踩三重约束陷阱：盒类型 + 文档流 + DOM 位置。如果目标只是让父容器包含浮动子项，display: flow-root 是更干净的选择——它直接创建 BFC，不依赖兄弟关系推算边界，也不会强制换行或引入额外空白。
兼容性注意点：
-
display: flow-root在 Safari 15.4+ 和所有现代 Chrome/Firefox 中稳定支持，IE 完全不支持 - 若需兼容旧环境，
overflow: hidden可 fallback，但它可能意外裁剪阴影或影响position: fixed子元素的定位参照系
真正容易被忽略的是：你看到的「clear 失效」，大概率不是属性写错了，而是元素没落在正确的盒类型 + 文档流 + DOM 位置三重约束里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
