clear:left仅使当前元素上边界下移至所有左浮动元素下边界之下，完全忽略右浮动元素，不改变浮动元素本身或撑开父容器。
clear:left 只避让左浮动，不碰右浮动
clear:left 的作用不是“清除浮动”，而是让当前元素的上边界下移，直到它不再和任何 float:left 元素在垂直方向上重叠。它对 float:right 元素完全无感——哪怕右边堆着三个右浮动导航项，它照样无视。
常见错误是以为加了 clear:left 就能“修复布局”，结果右侧内容被意外顶开或错位。这通常是因为误判了影响源：真正干扰你的，可能根本不是左边那个图，而是右边那个没设宽、又自动换行的 float:right 按钮。
- 只在明确存在左浮动且你只想避开它时用，比如图文环绕中插入一个操作按钮
- 若同时有左、右浮动，且你希望后续内容从整行起始位置开始，该用
clear:both，而不是拼凑两个clear - 别给
span或a直接设clear:left——它们默认是display:inline，clear对内联元素无效；必须先加display:block或改用div
clear:right 在 RTL 布局或混合浮动中才真有用
在纯 LTR 页面里硬塞 clear:right，往往是因为把“右侧有浮动”当成了问题，但实际布局冲突可能来自父容器塌陷或行框高度计算异常。真正需要 clear:right 的典型场景是：页面主体是 LTR，但右上角有一个工具栏用了 float:right，而下方某个提示条必须严格避开它，又不想被左侧内容挤偏。
另一个关键点：在 RTL（direction:rtl）文档流中，float:left 实际向右靠，float:right 向左靠。此时 clear:right 才会真正避开视觉左侧的浮动块——否则容易反向避让，导致元素卡在奇怪位置。
- 检查
direction和text-align是否意外触发了 RTL 行为 - IE6/7 中若父容器未触发 layout（如缺
zoom:1），clear:right计算可能偏移，建议搭配现代 BFC 方案 - 响应式断点切换时，浮动可能只在小屏启用，此时
clear:right应包裹在对应媒体查询内，避免大屏冗余计算
clear:both 是最稳妥的兜底选择，但别滥用
当你不确定干扰源是左还是右，或者多个浮动元素高度不一致、交错排列时，clear:both 是唯一能确保后续元素从“所有浮动之后”重新开始流式布局的方式。它不是懒人写法，而是应对复杂浮动组合的合理收敛策略。
但要注意：它会让元素独占一行，破坏原本设计的并排结构。例如在两栏浮动导航后加一个 clear:both 的搜索框，会导致它下面的内容全部左对齐、失去原有栅格节奏。
- 优先用于浮动容器的直接后续兄弟元素，而非嵌套在浮动内部的子项
- 如果父容器本身需要包裹浮动子项（即解决塌陷），
clear:both加在子元素上毫无作用——必须用display:flow-root、overflow:hidden或伪元素::after清除 - 在 Flex 或 Grid 布局已接管主结构的今天，
clear:both更多用于遗留模块或第三方组件嵌入场景
父容器塌陷和 clear 属性是两回事
这是最容易混淆的点：clear:left、clear:right、clear:both 都只调整自身位置，不会让父容器“感知”到浮动子项的高度。所以即使你在最后一个浮动子元素后面加了 clear:both 的空 div，父容器的 height 依然可能是 0。
想让父容器撑开？得靠触发 BFC：display:flow-root（推荐）、overflow:hidden（注意裁剪风险）、或兼容性更强的伪元素方案：.clearfix::after { content:""; display:table; clear:both; }。
- 不要指望
clear属性一招解决所有浮动问题——它只是定位微调工具，不是容器高度管理机制 - 现代项目中，
display:flow-root应作为首选，它语义清晰、无副作用，且已获 Chrome 50+/Firefox 53+/Safari 10.1+ 全面支持 - 若必须支持 IE，伪元素法仍是最可靠方案，但记得加
display:table（而非block）以兼容旧版 Safari
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
