图文并排首选float实现文字环绕（需img在文字前、设width和margin），现代简单并排用display: flex更简洁；float失效主因是父容器BFC限制、空元素干扰或未清除浮动。
直接说结论：图文并排不是靠“把图和字塞进同一行”，而是靠控制它们在文档流中的参与方式——float 仍是最兼容、最可控的文字环绕方案，但必须写在 <img alt="用HTML制作网页怎么排版图片与文字内容" > 上且图片 HTML 必须出现在文字之前；现代项目若只需简单并排（非环绕），display: flex 更干净、无清除烦恼。
为什么 float: left 让文字出现在图片右边
浏览器文本流默认从左往右填充。当 <img alt="用HTML制作网页怎么排版图片与文字内容" > 设置 float: left 后，它脱离文档流但仍“留出轮廓”，后续段落（如 <p></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>）会自动绕其右侧和下方空间排列——这不是文字被“推”过去，而是行内流自然填充空白的结果。
-
<img alt="用HTML制作网页怎么排版图片与文字内容" >必须写在文字内容之前，否则文字根本没机会绕 - 必须显式设置
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 不支持） - 浮动后紧跟空
<p></p> <p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>或只含空格的节点：这类元素不参与文本流，不会被绕排。修复：删掉空标签，或确保后续是含实际文字的块级元素 - 后续块级元素（如下一个
<h3></h3>）卡在图片下方：这是没清浮动。修复：在需要换行的位置加<div style="clear: both"></div>，或用伪元素在父容器上清除
什么时候该放弃 float，改用 flex
如果你的需求只是“图片+标题+描述并排显示”，不要文字环绕，只要视觉上左右对齐、垂直居中，display: flex 是更轻量、更可控的选择。
- 写法简洁：
<div style="display: flex; align-items: center;"> <img src="icon.png" style="max-width:90%" style="max-width:90%" alt="用HTML制作网页怎么排版图片与文字内容" ><span>说明文字</span> </div> -
align-items: center自动垂直居中，不用纠结vertical-align基线对齐的坑 - 响应式友好：给
<img alt="用HTML制作网页怎么排版图片与文字内容" >加max-width: 100%; height: auto;即可适配小屏，无需媒体查询干预 - 兼容性够用：IE10+ 支持，老项目加个
-ms-flexbox前缀基本覆盖
shape-outside 不是 float 的升级版，而是补充工具
如果真要让文字贴着不规则图形边缘走（比如圆形头像旁绕排），shape-outside 才是解法——但它必须配合已浮动的 <img alt="用HTML制作网页怎么排版图片与文字内容" > 使用，且只对块级替换元素生效。
- 必须先写
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，是机制本身的要求。
