clear:left仅避开左浮动，不限制右浮动；clear:both避开左右浮动；clear:right不稳定；clear不解决父容器塌陷，需用bfc方案。
clear:left 只躲左边浮动，不碰右边
当你给一个元素设 clear: left，它只保证自己**不会紧贴在任何左浮动元素的下方**，但完全不管右浮动——哪怕右边飘着三个 float: right 的盒子，它照样能往上顶、重叠、错位。这在双栏布局里特别容易翻车：左边导航栏用 float: left，右边广告位用 float: right，中间正文加了 clear: left，结果广告还是压在文字上。
常见错误现象：clear: left 后元素位置没“清”干净，右侧浮动内容依然侵占其空间；调试时用开发者工具看盒模型，发现元素高度塌陷或文字环绕异常。
- 适用场景：仅需避开左侧浮动干扰，且右侧确定无浮动（比如纯文本流+左浮动侧边栏）
- 不要用于响应式或混合浮动布局，尤其当存在
float: right时 - 注意：IE6/7 对
clear: left的解析有细微偏差，若需兼容，优先测真实设备
clear:both 是真正“全躲开”的保险选择
clear: both 表示该元素**既不挨着左浮动，也不挨着右浮动**，会自动下移到所有已浮动兄弟元素的底部。这是最常用也最不容易出错的写法，尤其适合清除浮动后的主内容区、分隔线、页脚等。
性能影响极小，但要注意它依赖父容器内浮动元素的 DOM 顺序——如果浮动块在 HTML 中写在后面，clear: both 元素可能被“卡”在错误位置。
- 典型使用场景：文章正文区、表单提交按钮、卡片列表后的清除行（
<div style="clear:both"></div>） - 与
overflow: hidden或display: flow-root不同，clear: both不创建 BFC，只做定位控制 - 若父容器本身浮动，
clear: both可能失效——此时要清的是父容器的浮动，不是子元素
clear:right 在右对齐布局中很脆弱
clear: right 看似对称，但实际极少单独可靠。原因很简单：浏览器渲染时从左到右、从上到下解析，右浮动元素往往“后出现、先占位”，导致 clear: right 元素找不到明确的右浮动锚点，表现不稳定。
常见错误现象：设置了 clear: right 却没效果；在 Chrome 和 Safari 中位置正常，Firefox 里却偏移；配合 margin-right 使用时，清除行为被意外覆盖。
- 仅建议在固定宽度 + 固定顺序的右对齐组件中谨慎使用（如右置图标按钮组）
- 避免与
position: absolute或transform混用，清除逻辑会被绕过 - 现代替代方案：用
display: flex或text-align: right实现右对齐，彻底绕开 clear
clear 不是万能的，别指望它修复浮动父容器塌陷
很多人以为给子元素加 clear: both 就能撑开父容器高度——其实不能。clear 只影响**自身定位**，不改变父容器的 BFC 状态。父容器仍会因内部浮动而高度塌陷，背景、边框、阴影全部消失。
这就是为什么你看到“清除了浮动”，但父容器的 border-bottom 还是不见了。
- 正确做法：对父容器设置
overflow: hidden、display: flow-root（推荐），或用伪元素::after { content:""; display:table; clear:both; } -
clear属性本身不触发新格式化上下文，这点和display: flow-root本质不同 - Flex/Grid 容器内，
clear完全无效——它们有自己的排列规则，浮动在其中已被弃用
浮动管理真正的复杂点不在 clear 值怎么选，而在于你是否清楚当前元素处于哪个格式化上下文中，以及它的父容器有没有形成 BFC。漏掉这一层，再准的 clear: both 也救不回塌陷的边框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
