clear: both是默认安全选项，它强制元素下移至所有浮动兄弟（无论left或right）底部，不依赖浮动方向统一性；clear: left仅避左侧浮动，对右侧无效，易被右浮动内容压住；clear: right因渲染顺序问题极不稳定，现代布局中基本可忽略。
绝大多数情况下，直接写 clear: both 就对了；clear: left 只在极少数受控场景下才安全可用，一不小心就会被右浮动内容压住。
clear: both 是默认安全选项，别轻易换
它强制元素下移到所有浮动兄弟（无论 float: left 还是 float: right）的底部，不依赖浮动方向是否统一，也不要求你预判右侧有没有浮动元素。只要前面有浮动块，它就往下挪，直到左右都“空了”为止。
- 常见错误现象：
clear: left加了，但右侧广告图还是压在正文第一行；调试时发现元素上边距被右浮动内容吃掉，文字被切割 - 适用场景：文章正文区紧接在左导航 + 右广告之后；表单提交按钮需要稳稳落在所有浮动输入项下方；卡片列表末尾加一条分隔线，确保不被任何浮动卡片干扰
- 注意：
clear: both不创建 BFC，只做定位控制；若父容器本身是float或position: absolute，它会失效——此时要清的是父容器的浮动，不是子元素
clear: left 只在“左侧有浮动、右侧确定无干扰”时可用
clear: left 的行为非常具体：它只检查 HTML 中位于自己之前的兄弟元素里有没有 float: left，有就下推；对 float: right 完全无视。它不是“清左边”，而是“我左边不能有浮动块顶着我”。
- 常见错误现象：加了
clear: left却没效果，大概率是前一个兄弟根本没设float: left，或者浮动的是right；更隐蔽的是，右侧浮动元素虽不触发清除，却仍会侵占该元素的行内空间，导致文字环绕异常或遮挡 - 适用前提：左侧有固定
float: left导航栏，且右侧内容已用position: absolute或display: flex脱离文档流；纯 LTR 布局，无响应式断点切换（小屏下右浮动可能转为普通流，clear: left会多等一个已不存在的浮动） - 不要用于混合浮动布局，尤其当存在
float: right时；IE6/7 对它的解析有细微偏差，若需兼容，优先测真实设备
clear: right 在现代布局中基本可忽略
clear: right 表现不稳定，原因很简单：浏览器渲染从左到右、从上到下解析，右浮动元素往往“后出现、先占位”，导致 clear: right 元素找不到明确的右浮动锚点。Chrome 和 Safari 中位置正常，Firefox 里却偏移，是典型表现。
- 仅建议在固定宽度 + 固定顺序的右对齐组件中谨慎使用（如右置图标按钮组）
- 避免与
position: absolute或transform混用，清除逻辑会被绕过 - 现代替代方案：用
display: flex或text-align: right实现右对齐，彻底绕开clear
浮动本身已是过时布局手段，但 legacy 项目里仍大量存在；真正容易被忽略的点是：clear 只解决“后续元素不下沉”的问题，它不修复父容器塌陷——那得靠 BFC（比如 overflow: hidden 或 display: flow-root）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
