应优先用现代布局替代浮动：单列用display: flow-root，多列用Flex/Grid；仅IE8–10需回退clear:left空盒，且须注释说明。
浮动元素后怎么让下一行内容从最左边开始
直接加 clear: left 的空盒子确实能生效，但这是上世纪的写法，现在不推荐——它破坏语义、增加无用 DOM、且在 Flex/Grid 布局中完全失效。
真正该做的是：**用现代布局接管浮动逻辑，而不是给浮动打补丁**。
- 如果父容器只有一列浮动元素，改用
display: flow-root（最轻量，兼容性到 Chrome 64+/Firefox 58+） - 如果需要多列并排 + 后续内容另起一行，优先用
display: flex或display: grid - 仅当必须兼容 IE8–IE10 时，才考虑
，但要加注释说明是临时兼容方案
flow-root 能替代 clear:left 吗
能，而且更干净。它让父容器生成一个新的块级格式化上下文（BFC），自动包含内部浮动，后续兄弟元素自然换行顶格。
对比：clear: left 是“等前面浮动结束再画”，flow-root 是“把浮动框锁进自己的地盘，外面不受影响”。
- 写法简单：
div.container { display: flow-root; }，无需额外标签 - 不会触发 margin collapse，也不影响子元素的垂直对齐行为
- 注意：Safari 10.1+ 才支持，iOS Safari 10.3+；旧版需回退到
overflow: hidden（有副作用）
Flex 布局里还用得着 clear 吗
完全不用。display: flex 本身就不吃浮动那一套——浮动元素在 flex 容器里会自动变成 inline-level，失去浮动效果。
如果你发现 flex 容器里的子项还在“飘”，大概率是：父容器没设 display: flex，或者你误把浮动加在了 flex 项目内部（比如项目里又套了个 float: left 的图片）。
- 正确做法：把需要并排的项设为 flex 项目，用
flex-wrap: wrap控制换行 - 想让某一项独占一行？加
align-self: flex-start没用，应该用width: 100%或flex-basis: 100% - 旧项目迁移时，检查是否残留了
float声明，它们在 flex 上下文中只是被忽略，不是被清除
clear:left 报错或不生效的常见原因
它本身不会报错，但常因上下文失效而“看起来没用”。典型情况：
- 目标元素没设置
clear，而是写在了浮动元素自己身上（float: left; clear: left—— 这毫无意义） - 父容器设置了
overflow: hidden或display: flow-root，已形成 BFC，浮动已被包含，再加clear就多余 - CSS 优先级被覆盖：比如某个更具体的规则写了
clear: none，或者用了!important冲突 - 元素是 inline 元素（如
span），clear对它无效，必须是块级或设置display: block
复杂点在于：浮动和清除本质是 CSS 2.1 的遗留机制，它的行为高度依赖文档流状态。一旦混入 Flex/Grid/position: absolute，就容易掉坑里——不是代码写错了，而是前提条件变了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
