clear属性仅对块级元素生效，因其依赖bfc中上边框边界对齐计算，内联元素无此边界；浮动元素自身已脱离文档流，无参照物；且clear只作用于同父容器内紧邻的前一个浮动兄弟。
clear 属性必须作用于块级元素，是因为它的布局逻辑依赖块级格式化上下文（BFC）中的“上边框边界对齐”计算，而内联元素不参与该计算流程。
clear 的生效前提是元素有「上边框边界」
clear 不是让浮动消失，而是把当前元素的 top border edge 往下推，直到它低于所有指定方向浮动元素的 bottom border edge。这个推算过程只在块级盒中定义——因为只有块级盒才具备明确的、可参与文档流垂直定位的上边界。
- 行内元素（如
span、em）没有独立的块级边界概念，浏览器直接忽略其clear声明 -
display: inline-block元素虽能生成盒，但不触发 BFC，且其定位方式仍基于行内上下文，clear同样静默失效 - 用开发者工具检查
Computed面板里的display值，若不是block、table、flow-root、flex或grid，clear就不会起效
为什么给浮动元素自己加 clear: both 没用
浮动元素（如设置了 float: left）已脱离标准文档流，它不再有「前一个浮动兄弟」作为参照，clear 的避让逻辑失去目标。
-
clear只对处于普通文档流中的块级盒有效；浮动、绝对定位、position: fixed都会让元素脱离流，clear失去意义 - 即使 DOM 中写的是
<div class="float" style="clear: both;"></div>，浏览器也会跳过该clear计算 - 想控制浮动元素位置？改用
margin或容器级布局（display: flex）更直接
DOM 位置和父容器必须满足「紧邻同级」条件
clear: both 不是全局扫描所有浮动，它只看自己在 DOM 树中**前一个同级兄弟元素**是否浮动，且二者必须共属同一父容器。
- 中间插了注释节点
<!-- -->、空文本节点或display: contents容器，就会破坏「紧邻」关系 - 浮动元素在
.sidebar里，clear元素在.main里 → 无参照物，无效 - 父容器用了
display: flex或display: grid，子项自动进入弹性/网格上下文，clear被规范禁止使用
真正容易被忽略的点是：你看到的「clear 失效」，大概率不是属性写错了，而是元素没落在正确的盒类型 + 文档流 + DOM 位置三重约束里。现代布局中，display: flow-root 替代 clear 的本质，就是绕开了这些隐式依赖——它直接创建 BFC，不靠兄弟关系推算边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
