clear: left 仅作用于后续兄弟元素，使其避开左侧浮动元素；它不清理浮动本身，只调整自身在文档流中的定位位置。
clear: left 只对后续兄弟元素生效，它不“清理”浮动本身，而是让当前元素避开左侧所有 float: left 元素——用错位置就完全无效。
clear: left 必须加在浮动元素之后的兄弟元素上
很多人给左浮动的 .sidebar 自己加 clear: left，结果毫无变化。因为 clear 不作用于浮动源，只影响自身定位：浏览器会把它下推，直到其左侧没有 float: left 元素为止。
- ✅ 正确写法：
.main-content { clear: left; }（.main-content是.sidebar后面的兄弟元素） - ❌ 错误写法：
.sidebar { float: left; clear: left; }（clear对已浮动元素无意义） - ⚠️ 注意：如果
.main-content是position: absolute或display: flex子项，clear会失效——它只对参与文档流的块级元素起作用
用 clear: left 实现“左浮动后换行”，而非清空整行
当页面中只有左浮动元素（比如多个 float: left 的卡片），你希望第 4 张卡片另起一行，而不是被前 3 张挤到右侧——这时不能用 clear: both，否则会把右侧可能存在的 float: right 导航也压下去。
- ✅ 场景示例：三列卡片布局，每行最多 3 个，第 4 个必须换行 → 给第 4 个卡片加
clear: left - ✅ CSS 写法：
.card:nth-child(3n+1) { clear: left; }（自动为每行第一个卡片清除左侧浮动） - ⚠️ 避坑：不要用
clear: both替代——它会强制避开左右两侧所有浮动，哪怕页面里根本没右浮动元素，也会多出不必要的垂直间隙
clear: left 在图文混排中的真实作用
左浮动一张图，后面跟着几段文字，默认会环绕；但你想让第二段文字从新行开始、不和图同行，又不想影响第三段（仍保持环绕）——这时候 clear: left 就是精确开关。
- ✅ 示例：
.caption { clear: left; }让说明文字块严格出现在图片下方，不与图并排 - ✅ 对比：
clear: both会让该文字块同时避开左右浮动，但在纯左浮动场景下冗余，且可能破坏右侧固定定位按钮的布局 - ⚠️ 关键限制：父容器若设置了
overflow: hidden或display: flow-root，内部已形成 BFC，浮动被包含，此时再加clear: left可能无视觉变化——先确认是否真有浮动溢出
真正容易被忽略的是：clear 不是“重置浮动”，而是“调整当前位置”。它依赖文档流中浮动元素的实际渲染顺序和范围，一旦浮动被 BFC 包裹、或后续元素脱离流，clear: left 就成了摆设。动手前先用 DevTools 检查浮动元素是否真的“漏出”了父容器边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
