浮动元素不触发块级换行是设计使然，它只影响内联内容环绕，对后续块级元素“视而不见”；clear: both 仅对紧跟其后且 display 为 block 或 flow-root 的兄弟元素生效；父容器塌陷会导致换行失效，应优先用 display: flow-root 修复。
浮动元素不触发块级换行，是设计使然
这不是 bug，而是 float 的原始语义：它只影响**内联内容（文字、span、图片等）的环绕路径**，对后续块级元素（如 div、p、section）默认“视而不见”。块级元素仍按正常文档流布局，只要空间够，就会从浮动元素侧边开始渲染——看起来像“被吸过去”，实则是它根本没感知到浮动元素的存在。
为什么 clear: both 加了也不换行？
常见误操作是把 clear: both 写在浮动元素自己身上，或写在非块级元素上。它只对**紧跟在浮动元素之后、且 display 为 block 或 flow-root 的兄弟元素**生效。
- ❌ 错误：
.item { float: left; clear: both; }→ 每个都独占一行，失去并排意图 - ❌ 错误：
<span class="text">文字</span>直接跟在浮动图后面 →span是内联元素，clear对它无效 - ✅ 正确：
<img class="float-left"><div class="content" style="max-width:90%">正文</div> - ⚠️ 注意：如果中间隔着其他非块级节点（如文本节点、
br），clear会失效，必须用块级容器包住目标内容
父容器塌陷会让“换行”彻底失效
当浮动子项撑不开父容器高度（computed height = 0px），后续块级元素就真的“没地方换”——它们会从父容器顶部开始渲染，视觉上覆盖或紧贴浮动元素下方，而不是换到下一行。
- 快速验证：给父容器临时加
overflow: hidden或display: flow-root，若布局立刻正常，说明是塌陷问题 - 不要用
height: 100px硬撑，会破坏响应式；优先选display: flow-root（现代标准） - 伪元素清除（
::after）若失效，检查父容器是否设了固定height或overflow: hidden，会截断伪元素
真正想让块级元素换行，别硬扛 float
float 本不是为块级布局设计的。你花时间调 clear 和 margin，不如直接切换模型：
- 多列卡片/网格：用
display: flex+flex-wrap: wrap，子项设flex: 0 0 calc(50% - 8px) - 图文环绕仍需 float：仅限单图+段落场景，其余一律用
shape-outside或display: flow-root配合float - 响应式栅格：直接上
display: grid，grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))
最易被忽略的是：浮动与 clear 的作用对象错位，以及父容器塌陷未修复就强行加 clear —— 这会让问题从“不换行”变成“错位+留白+响应式失效”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
