浮动图片无法在文字中间垂直居中，因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 edge，不是边框或内容区——所以不加 margin 就没有呼吸感。而且这个 margin 必须加在图片上，方向还得对：


CSS婚礼策划服务机构宣传网站模板
CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
下载
• float: left → 必须加 margin-right（如 margin-right: 16px），控制右侧文字距离
• float: right → 必须加 margin-left（如 margin-left: 16px），别反了
• 一定要加 margin-bottom（如 margin-bottom: 12px），否则下一段 <p></p> 会顶到图片底部，留出大片空白
• 避免用 margin: 10px 这类简写——上下 margin 会意外“顶开”相邻段落，破坏行高对齐

父容器塌陷、后续布局全乱，怎么收住浮动？

float 让图片脱离文档流，父容器就“看不见”它了，高度塌成 0，后面的内容直接叠上来。这不是可选项，是必须处理的副作用：

• 最稳妥：给父容器加 display: flow-root（现代浏览器全支持，2026 年已成首选）
• 兼容旧版：用伪元素清除，比如 .container::after { content: ""; display: table; clear: both; }
• 慎用 overflow: hidden：它虽能触发 BFC，但若父容器有滚动需求或内容溢出，会意外裁剪
• 别给图片加 clear: both——那是用来结束环绕的，不是防塌陷

真正难的不是写 float: left，而是理解它只管“行内绕排”，不管“块级定位”；不是调不对 margin，而是没意识到 margin 必须加在图片上、且方向不能反。这些细节一旦漏掉，布局就从第一行开始错位，越调越乱。