浮动图片无法在文字中间垂直居中，因float仅支持左/右贴边环绕；要嵌入行内需用vertical-align+inline-block；float只影响后续行内内容排布，对紧随的块级元素无效，故文字常从图片底部开始绕排。
浮动图片不可能“在文字中间”垂直居中显示——float 只能左/右贴边，文字绕排在其侧边和下方，所谓“中间”是错觉或误读。 真正要让图片嵌入段落行内、随文字基线对齐，该用 vertical-align + display: inline-block，而不是 float。
为什么 float:left 后图片总在段落顶部，文字从下面开始绕？
这不是 bug，是浏览器严格按规范执行：float 只影响**后续行内内容的行框（line box）排布**，对紧跟着的块级元素（比如 <p></p>）完全无效。常见表现就是图片孤零零浮在上面，下一段文字从它底部才开始。
- 图片和文字不在同一个父容器里——必须共用一个
<div> 或 <code><article></article> - 图片没设
width，尤其在 Flex/Grid 父容器中，float行为会异常甚至失效 - 文字被包在另一个
<p></p>里，而该<p></p>没触发 BFC（比如没加overflow: hidden或display: flow-root） - 父容器高度太小，把浮动区域裁掉了（
overflow: hidden+ 高度不足 = 图片被截断） -
float: left→ 必须加margin-right（如margin-right: 16px），控制右侧文字距离 -
float: right→ 必须加margin-left（如margin-left: 16px），别反了 - 一定要加
margin-bottom（如margin-bottom: 12px），否则下一段<p></p>会顶到图片底部，留出大片空白 - 避免用
margin: 10px这类简写——上下 margin 会意外“顶开”相邻段落，破坏行高对齐 - 最稳妥：给父容器加
display: flow-root（现代浏览器全支持，2026 年已成首选） - 兼容旧版：用伪元素清除，比如
.container::after { content: ""; display: table; clear: both; } - 慎用
overflow: hidden：它虽能触发 BFC，但若父容器有滚动需求或内容溢出，会意外裁剪 - 别给图片加
clear: both——那是用来结束环绕的，不是防塌陷
float:left 文字环绕但紧贴图片边缘，怎么加间距？
文字默认紧贴图片的 margin edge，不是边框或内容区——所以不加 margin 就没有呼吸感。而且这个 margin 必须加在图片上，方向还得对：
父容器塌陷、后续布局全乱，怎么收住浮动？
float 让图片脱离文档流，父容器就“看不见”它了，高度塌成 0，后面的内容直接叠上来。这不是可选项，是必须处理的副作用：
立即学习“前端免费学习笔记（深入）”；
真正难的不是写 float: left，而是理解它只管“行内绕排”，不管“块级定位”；不是调不对 margin，而是没意识到 margin 必须加在图片上、且方向不能反。这些细节一旦漏掉，布局就从第一行开始错位，越调越乱。
