clear: both 是唯一能强制标题脱离前序浮动影响、回归容器左边缘的手段，它作用于标题自身块级生成位置，而非父容器或浮动元素。
clear: both 是最直接有效的解法，但必须加在「下一章节标题」元素自身上，而不是图片或父容器里——否则它不会顶格。
为什么标题不顶格？根源在浮动残留的行框计算
浮动图片脱离文档流，但文字仍按“绕排逻辑”继续渲染。当段落结束、标题出现时，浏览器默认让它接续上一段的末尾行框位置，而非从容器左边缘开始。这不是 margin 或 padding 问题，是行内格式化上下文（IFC）残留影响。
- 常见错误现象：
h2看似有空白，检查 computed styles 会发现它的line-height基线被上一段绕图文字拖高 - 不要给父容器加
overflow: hidden——它可能裁掉标题的text-shadow或position: relative子元素 - 不要依赖
display: flow-root治标——它只解决父容器塌陷，不重置后续块级元素的起始位置
标题元素上必须加 clear: both
这是唯一能强制标题脱离前序浮动影响、回归容器左边缘的手段。它不是“清父容器”，而是“清自己所处的行位置”。
- 写法示例：
<h2 style="clear: both;">第二章：原理详解</h2> - 若用 class 复用，确保该 class 不被媒体查询覆盖（部分 CSS-in-JS 库在响应式断点中会丢弃伪元素，但
clear是原生属性，100% 可靠） - 避免写成
clear: left或clear: right——图文混排中浮动方向不确定（比如小屏下可能改为float: none），both才兜底
动态渲染场景下容易漏掉的点
React/Vue 中，如果标题是条件渲染（如 v-if 或 {showTitle && <h2>}</h2>），且浮动图片在另一个组件里，clear 很可能没加到实际渲染出的 h2 上。
立即学习“前端免费学习笔记（深入）”；
- 推荐方案：把
clear: both写进全局基础标题样式，例如h1, h2, h3 { clear: both; } - 慎用
clearfix类套在父容器上——它只保证容器高度完整，对后续兄弟标题的位置无约束力 - 若标题用了
position: absolute，clear无效；此时必须改用top: 0+ 容器position: relative显式定位
真正关键的不是“怎么清”，而是清楚 clear 的作用域：它只作用于当前元素的**块级生成位置**，不修复父容器，也不影响其他兄弟。图文混排中，标题顶格这件事，永远得由标题自己负责。
