clear只对后续兄弟生效，因其计算逻辑仅向前查找紧邻同级浮动兄弟并下移自身上边界；它不作用于自身、祖先、内联元素及flex/grid子项，现代推荐用display:flow-root替代。
clear 只对后续兄弟生效，是因为它的计算逻辑依赖文档流顺序
clear 不是“清除浮动状态”，而是让当前元素的上边界下移，直到它低于所有指定方向的浮动兄弟元素的下边界。这个计算必须基于 DOM 中紧邻的、在它前面的浮动兄弟——浏览器只往前看（不往后、不跨层、不回溯），且只看同级元素。
常见错误现象：clear: both 加在浮动元素自己身上没反应；父容器设了 clear: both 却仍塌陷；浮动后跟了一个 span 并设 clear: both 也不起作用。
- 浮动元素已脱离文档流，
clear对它自身无意义 - 父容器不是浮动元素的“兄弟”，而是“祖先”，
clear不作用于祖先 -
span是内联元素，不参与块级格式化上下文（BFC），clear无法触发位移
为什么 clear 不会跨元素查找浮动兄弟
clear 的定位机制是“就近匹配”：只检查当前元素在源码中**紧邻的前一个同级块级兄弟**是否浮动。中间插一个非浮动块（比如普通 div 或 p），就会打断这个链路——后面的元素就不再视为“浮动之后”的位置，自然不触发 clear。
使用场景举例：图文混排中，一张左浮动图片后紧跟一段文字 p，这段 p 设 clear: both 才能从图片下方开始；但如果中间加了个 div class="spacer"（未浮动），那 p 就完全感知不到前面的浮动图片。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 浮动必须是“前一个同级兄弟”，不能隔层、不能隔元素
- 绝对定位、
display: none或 Flex/Grid 子项不算有效浮动兄弟 - 即使前面有多个浮动元素，
clear也只关心它们共同的下边界位置，不逐个判断
clear: left / right / both 在兄弟关系中的实际差异
clear: left 不是“清除左边浮动”，而是“我左边不能有浮动，否则我就往下挪”；clear: right 同理。而 clear: both 要求左右都空才停——这导致它常比 clear: left 多下移一段距离，尤其当页面存在右浮动侧边栏时。
参数差异直接影响布局节奏：单左浮广告后接正文，用 clear: left 更紧凑；但若未来可能加入右浮组件（如分享按钮），就必须用 clear: both，否则正文会被挤到右侧浮动旁边。
-
clear: left和clear: right都只管一侧，另一侧浮动可并存 -
clear: both是最保守选择，但会引入额外空白，需结合设计权衡 - 所有值都只对块级盒生效，
display: inline-block元素设了也无效
现代布局中，clear 的替代方案为何更可靠
Flex 和 Grid 容器本身形成独立格式化上下文，子项上的 float 和 clear 被忽略；display: flow-root 则直接让父容器创建 BFC，自动包裹浮动子项，无需额外节点或伪元素。
容易被忽略的点：哪怕你没写 float，某些 CMS 输出或第三方组件仍可能注入浮动样式；此时 display: flow-root 比反复给每个后续 p 加 clear: both 更鲁棒，且不受 DOM 动态插入影响。
-
display: flow-root兼容性好（Chrome 64+/Firefox 58+/Safari 15.4+） - 伪元素方案
::after { content: ""; display: table; clear: both; }仍适用于 IE11 及更旧环境 - 移动端 Safari 中
-webkit-overflow-scrolling: touch可能干扰clear渲染，但不影响flow-root
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
