clear:left和clear:right仅使元素上边界下移至指定方向浮动元素底部，不解决右侧或左侧浮动干扰；clear:both才是通用解，使元素下移至所有浮动元素最底端之下；二者均不解决父容器塌陷，需配合bfc触发方式。
clear:left 只躲左边，clear:right 只躲右边
两者都不是“清除浮动”，而是让当前元素的**上边界下移到指定方向所有浮动元素的底部之下**。clear:left 完全不管右侧有没有 float:right 元素；同理，clear:right 对左侧浮动也视而不见。
常见错误现象：clear:left 后元素位置看似“清了”，但右侧飘着一个 float:right 的广告位，文字还是被顶上去、错位重叠——因为 clear:left 压根不约束右边。
- 只在单向浮动布局中可靠：比如全文只有
float:left的侧边栏，正文用clear:left避开即可 - 若 HTML 中浮动块顺序混乱（比如右浮动写在左浮动前面），
clear:right可能找不到锚点，直接失效 -
clear:right在 RTL 布局或右对齐工具栏中偶有实用，但现代更推荐用text-align: right或flex-direction: row-reverse替代
clear:both 才是真正“全躲开”的通用解
clear:both 表示该元素必须下移到**所有已渲染的左浮 + 右浮兄弟元素的最底端之下**，不挑方向，也不依赖浮动顺序是否“规范”。它是最小心智负担、兼容性最好、出错率最低的选择。
典型使用场景：<div style="clear:both"></div> 放在浮动卡片列表后、表单提交按钮前、图文环绕结束处。
- 注意 DOM 顺序：浮动元素必须出现在
clear:both元素之前，否则浏览器没看到“前面有浮动”，就跳过计算 - 它不创建 BFC，所以不会撑高父容器——父容器塌陷问题仍需靠
overflow:hidden或display:flow-root - 别给
position: absolute或transform元素设clear，声明会被忽略
clear:left/right 在 flex/grid 容器里完全无效
如果父容器是 display:flex 或 display:grid，clear 属性直接被 CSS 引擎忽略——开发者工具里会显示为划掉状态。这不是 bug，是规范行为：flex 和 grid 布局模型根本不走浮动流那一套。
此时若想实现类似“避开左侧浮动图”的效果，得换思路：
- 用
margin-top手动留空（简单粗暴，适合静态高度） - 用
align-self: flex-start控制子项对齐（配合flex-wrap: wrap） - 把图片和文字都放进同一个 flex 容器，用
order调整视觉顺序
强行在 flex 容器里写 clear:left，只会让你多花十分钟查为什么没反应。
父容器塌陷不是 clear 能解决的问题
这是最容易反复踩的坑：clear:left 或 clear:both 只调整**自身位置**，不参与父容器高度计算。哪怕你给最后一个子元素加了 clear:both，只要父容器没触发 BFC，它依然塌陷。
正确组合方式：
- 父容器加
display:flow-root（推荐，语义清晰，无副作用） - 或加
overflow:hidden（老项目兼容好，但可能意外裁剪阴影/下拉菜单） - 或用伪元素
::after { content:""; display:table; clear:both; }（传统 clearfix，IE6+ 兼容）
单独依赖 clear 处理塌陷，等于用锤子拧螺丝——方向就错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
