clear: both是默认安全选项，它同时清除左右两侧浮动，强制元素下移至所有浮动元素下方，适用于绝大多数场景；clear: left仅避开左侧浮动，对右侧浮动无效，需确保右侧无干扰；clear: right在现代布局中基本可忽略。
clear: both 是默认安全选项，别轻易换
绝大多数场景下，clear: both 就是你要写的唯一值。它不依赖浮动方向是否统一，也不要求你提前预判右侧有没有 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会多等一个已不存在的浮动） - 不需要兼容 IE6/7，否则 DOM 解析顺序偏差可能导致位置错位
clear: right 基本可以忽略，现代布局里它没位置
clear: right 在真实项目中极少可靠。浏览器渲染从左到右，右浮动元素常“视觉先占位、DOM 后出现”，导致清除逻辑漏算；Firefox 和 Chrome 表现不一致；一旦混用 transform 或 position: absolute，清除直接失效。
典型误用：给右置工具栏按钮组加 clear: right，期望它避开上方右浮动 banner，结果在 Safari 里正常，在 Firefox 里卡在 banner 中间。
替代方案更简单有效：
- 右对齐文本用
text-align: right - 右置按钮组用
margin-left: auto或justify-content: flex-end - RTL 布局中，
clear: right仍指盒模型右侧，不是“文字方向右侧”，容易理解反
Flex/Grid 容器里 clear 根本不生效
只要父容器设置了 display: flex 或 display: grid，子元素上的 float 和 clear 都会被浏览器忽略——这不是 bug，是 CSS 规范明确废弃的行为。
如果你发现 clear: both “没反应”，先检查父容器：
- 是不是写了
display: flex？→ 改用align-items/justify-content - 是不是用了
display: grid？→ 改用grid-row/place-items - 有没有混用老代码（比如浮动子项塞进 flex 容器）？→ 浮动会被静默丢弃，
clear失去作用对象
真正容易被忽略的一点：清除浮动从来不是为了“修复父容器高度塌陷”，而是控制后续兄弟元素的位置。想撑开父容器？display: flow-root 才是现代标准解法，clear: both 只是借道而行的副作用。
