clear:left 和 clear:right 的作用是让当前元素的外边框边缘不与指定方向的浮动元素重叠，仅调整自身位置，不影响浮动状态或父容器高度；常用于图文环绕、多列混排等需局部对齐场景，但无法解决父容器塌陷，须配合bfc触发机制。
clear:left 和 clear:right 的实际作用范围
它们不是“清除某个方向上的浮动元素”，而是“让当前元素的**外边框边缘**不与指定方向的浮动元素重叠”。换句话说，clear:left 是告诉浏览器：“我这个元素的上边界，必须下移到所有左侧浮动元素的下边界之下”；clear:right 同理。它只影响**自身位置**，不改变其他元素的浮动状态或父容器高度。
什么时候必须用 clear:left 或 clear:right
常见于多列混排且需局部对齐的场景，比如图文环绕中文字绕左图、右侧插入一个不参与环绕的独立模块：
- 左侧有一张
float:left的图片，正文自然环绕 —— 此时若想在正文中间插入一个广告位，并让它独占一行、不被图片挤偏，就得给广告clear:left - 两个并排的浮动卡片（
float:left和float:right），中间要插一个居中的标题栏，该标题必须避开左右两边浮动内容，此时clear:both更合适；但若只担心被左边卡片顶上来，clear:left就够了 -
clear:right多见于 RTL（从右向左）语言布局，或右侧固定工具栏需要避开右浮动侧边栏时
clear:left/right 不解决父容器塌陷
这是最容易混淆的一点：哪怕你给子元素加了 clear:left，只要它本身没脱离文档流（比如没设置 display:block 或没触发 BFC），它的父容器依然可能高度塌陷。因为 clear 只调整位置，不参与父容器高度计算。
- 错误认知：“加了
clear:left就等于清除了浮动影响” → 实际只是挪了个位置 - 真正让父容器包裹住所有浮动子项，得靠触发 BFC：
overflow:hidden、display:flow-root、伪元素::after等 - 如果同时需要定位控制 + 父容器撑高，得组合使用：比如给父容器加
display:flow-root，再给内部某个元素加clear:left
IE6/7 下 clear:left/right 的兼容细节
在老版本 IE 中，clear 对行内元素（如 span）无效，必须是块级或设置 display:block 才能生效。另外，若父容器没有 layout（比如缺少 zoom:1 或 height），clear 可能表现异常 —— 这也是为什么过去常用 .clearfix 类配合 zoom:1 而非单独依赖 clear。
- 安全写法：始终确保应用
clear的元素是块级（display:block或默认块级标签如div、p） - 避免对
inline元素直接设clear，即使现代浏览器支持，语义也不合理 - 不用
clear:left去“修复”整个浮动区域的高度问题，那是 BFC 的职责
真正麻烦的不是语法，而是误判 clear 的能力边界 —— 它只管“别挨着我”，不管“帮我把爹撑起来”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
