浮动导致文字环绕后后续段落上浮、父容器高度塌陷、文字首行对不齐，根本原因是浮动元素脱离文档流；应优先用clear:both清除浮动、display:flow-root触发bfc、vertical-align调整对齐，而非依赖float做布局。
文字环绕后后续段落上浮错位
这是最典型的 float 后遗症：图片加了 float: left，文字绕过去了，但紧接着的 <h2></h2> 或下一个 <p></p> 却“飘”到图片右侧顶部，而不是老老实实从下一行开始。根本原因是浮动元素脱离文档流，后续块级元素完全感知不到它的存在。
解决方法不是去调那个 <h2></h2> 的 margin，而是用 clear 把它“按回原位”：
- 在需要另起一行的元素上直接加
clear: both（如<h2 style="clear: both">标题</h2>） - 更推荐给该元素的父容器加
clear: both，避免逐个写内联样式 - 注意
clear: left只避开左浮动，clear: right只避开右浮动；clear: both才能通吃
父容器高度塌陷导致整体布局下沉
图片浮动后，如果父 <div class="content"> 里只有这张图和一段文字，你会发现这个 <code>div 高度变成 0，底边框消失，下面的模块直接贴上来——这就是“高度塌陷”。它不是 bug，是 float 的设计机制决定的。
别用 height: auto 硬撑，也别靠给父容器加 overflow: hidden（有裁剪风险）。稳妥做法是触发 BFC：
- 给父容器加
display: flow-root（现代、无副作用、推荐） - 兼容老浏览器时用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }，再给父容器加class="clearfix" - 避免用
overflow: hidden——一旦内部有position: absolute或transform动画，内容会被意外截断
文字首行对不齐、上下浮动错位
图片 float: left 后，旁边第一行文字常常偏高或偏低，看起来“挂”在图片上。这不是文字有问题，而是图片和文字默认按基线（baseline）对齐，而图片的 baseline 在底部，文字的 baseline 在中间。
快速修复方式有两种：
- 给图片加
vertical-align: middle或vertical-align: top，强制对齐方式 - 给包含文字的容器（比如
p）设line-height，值接近图片高度，视觉上拉平 - 更彻底的解法：放弃
float，改用display: flex+align-items: flex-start，文字和图片天然按顶对齐，无需微调
为什么 clear 不能解决所有浮动问题
clear 只作用于“当前元素”，它能让某个块避开前面的浮动，但无法修正浮动元素之间因高度差异造成的错位（比如左图高、右图矮，右边那块就被卡在中间）。它也不影响浮动元素自身的排列逻辑。
真正的问题在于：你正在用一个为“图文环绕”设计的属性，强行做“布局控制”。2026 年还在靠 float 做多列或卡片排列，大概率会在响应式换行、gap 控制、垂直居中这些地方反复卡住。复杂点在于——clear 是止痛药，flex 或 grid 才是诊断书。
