clear: left 和 clear: right 清除的是前面紧邻的同向浮动元素：left 只避开前一个 float: left，right 只避开前一个 float: right；二者均不作用于反向浮动，且仅对块级盒生效，在 flex/grid 容器中无效。
clear: left 和 clear: right 到底清的是谁？
它们不是清除自己左边或右边的浮动元素，而是告诉浏览器：“我这个元素，**不允许前面紧邻的浮动元素出现在我的左侧（或右侧）”**。关键在“前面紧邻”——只看它在 HTML 中前面的兄弟元素，且那些兄弟得是 float: left 或 float: right 的。
常见错误现象：clear: left 写了但没效果？大概率是因为前一个兄弟根本没浮动，或者浮动的是 right，对 left 不构成“左侧阻挡”。同理，clear: right 对 float: left 元素完全无效。
-
clear: left只会等所有前面的float: left元素结束才开始布局 -
clear: right只响应前面的float: right，对float: left视而不见 - 如果前面既有
float: left又有float: right，clear: both才能真正“全清”
什么时候必须用 clear: left 而不是 both？
典型场景：多栏混排中，某些内容块需要避开左侧导航栏，但又不希望被右侧浮动广告卡住。比如一个三栏布局，左栏 float: left，右栏 float: right，中间正文想“只躲左栏、不等右栏”，就得用 clear: left。
性能影响很小，但语义更精确；滥用 clear: both 可能导致本不必等待的右侧浮动被强行延迟渲染，尤其在动态插入内容时容易出布局错位。
立即学习“前端免费学习笔记（深入）”；
- 左侧有固定导航栏（
float: left），正文需从它下方开始，但右侧广告是后来 JS 插入的浮动 —— 用clear: left更安全 - 响应式断点中，右栏在小屏转为普通流，此时
clear: both会多等一个不存在的浮动，造成意外空白 - 不要指望
clear: left能防止自身内容被右侧浮动“入侵”——它只管定位起点，不管后续行内环绕
clear: left 在 flex 或 grid 容器里还起作用吗？
不起作用。clear 是专为传统文档流 + 浮动设计的属性，在 display: flex 或 display: grid 的容器内部，浮动本身就被忽略（除非显式设 float 且父容器不是 flex/grid），clear 自然失效。
容易踩的坑：把一个 clear: left 元素放在 display: flex 的父容器里，发现完全不生效——不是写错了，是 CSS 引擎直接跳过该声明。这时候该用 margin-top 或 align-self 等现代布局手段替代。
- 检查父容器的
display值，是block或inline-block才可能触发clear - 开发者工具里看到
clear被划掉？先确认父容器是否 flex/grid - 不要试图用
clear解决 flex 子项错位——那是order、flex-wrap或align-items的事
IE8 及更老浏览器里 clear 的兼容性陷阱
IE8 支持 clear: left/right/both，但有一个致命问题：如果清除目标是「前面第一个浮动元素」，而那个元素恰好被设置了 zoom: 1（触发 hasLayout），IE8 有时会错误判断其边界，导致 clear 多等一行甚至完全失效。
这不是规范问题，是渲染引擎 bug。现代项目虽已不用兼容 IE8，但如果维护老系统，遇到 clear: left 在 IE8 下抽风，优先排查前面浮动元素是否带 zoom、position: relative 或 overflow: hidden 这类 hasLayout 触发器。
- 临时修复：给触发
clear的元素加zoom: 1，有时反而能绕过判断逻辑缺陷 - 更稳方案：改用
clear: both+ 额外 wrapper 包裹左侧浮动，避免依赖 IE8 对单侧清除的脆弱计算 - 别信“IE8 清除浮动必须用 both”这种笼统说法——
left/right在多数简单场景下是可靠的，只是边界 case 太多
display: inline 或 inline-block 元素写了也白写。这点连很多老手都会临时卡住。 
