图文并排首选float实现文字环绕（需img在文字前、设width和margin），现代简单并排用display: flex更简洁；float失效主因是父容器BFC限制、空元素干扰或未清除浮动。
直接说结论：图文并排不是靠“把图和字塞进同一行”，而是靠控制它们在文档流中的参与方式——float 仍是最兼容、最可控的文字环绕方案，但必须写在 display: flex 更干净、无清除烦恼。
为什么 float: left 让文字出现在图片右边
浏览器文本流默认从左往右填充。当 float: left 后，它脱离文档流但仍“留出轮廓”，后续段落（如
）会自动绕其右侧和下方空间排列——这不是文字被“推”过去，而是行内流自然填充空白的结果。
-
- 必须显式设置
width（比如width: 200px或width: 30vw），仅用max-width: 100%会导致加载时占位塌陷、文字先绕错位置再重排闪动 - 务必加
margin-right（左浮动时）或margin-left（右浮动时），否则文字紧贴图片边缘，可读性差 - 父容器不能是
display: flex或display: grid，否则浮动被截断，文字不绕
float 失效的三个典型场景和修复方式
常见现象：图片浮上去了，但文字整块从下方顶上来，像没生效一样。
- 父容器用了
overflow: hidden或display: flex：这会创建新 BFC，把浮动“关在里面”。修复：换用overflow: auto（注意可能撑高容器），或改用display: flow-root（IE 不支持） - 浮动后紧跟空
或只含空格的节点：这类元素不参与文本流，不会被绕排。修复：删掉空标签，或确保后续是含实际文字的块级元素 - 后续块级元素（如下一个
）卡在图片下方：这是没清浮动。修复：在需要换行的位置加，或用伪元素在父容器上清除
什么时候该放弃 float，改用 flex
如果你的需求只是“图片+标题+描述并排显示”，不要文字环绕，只要视觉上左右对齐、垂直居中，display: flex 是更轻量、更可控的选择。
- 写法简洁：
说明文字
-
align-items: center自动垂直居中，不用纠结vertical-align基线对齐的坑 - 响应式友好：给
max-width: 100%; height: auto;即可适配小屏，无需媒体查询干预 - 兼容性够用：IE10+ 支持，老项目加个
-ms-flexbox前缀基本覆盖
shape-outside 不是 float 的升级版，而是补充工具
如果真要让文字贴着不规则图形边缘走（比如圆形头像旁绕排），shape-outside 才是解法——但它必须配合已浮动的
- 必须先写
float: left，再加shape-outside: circle(50%) - 圆心默认在左上角，需配合
shape-margin控制文字与形状间隙 - Safari 需加
-webkit-shape-outside前缀，15.4 以下不支持aspect-ratio，老项目慎用 - 它解决不了多图交错、频繁响应式断点切换等复杂排版，此时应直接上 CSS Grid 划分图文轨道
真正容易被忽略的是：图文排版不是纯样式问题，而是 HTML 结构语义 + CSS 流行为 + 加载时机三者耦合的结果。一个没设 width 的浮动图片，在慢网下会先绕错位置再跳变；一个用了 display: flex 的父容器，会让所有子级 float 彻底失效——这些都不是 bug，是机制本身的要求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
