HTML5允许但不推荐将img放在p里；应让img与p平级，用CSS（如float、flex）控制图文布局，避免语义混乱和渲染异常。
img 放在 p 里合法吗？HTML5 允许但不推荐
HTML5 标准确实允许 <img> 作为 <p> 的子元素，但前提是它必须是“流内容”且不破坏段落语义。实际中，<img> 放进 <p> 容易引发两个问题：一是视觉上图片会占据整行（默认块级表现），二是语义混乱——图片往往不是“段落文字的一部分”，而是独立媒体元素。
常见错误现象：<p><img src="a.jpg">这是一段说明文字</p> 渲染后图片和文字上下堆叠，而非环绕；或者文字被挤到下一行，看似“没环绕”。
- 如果目标是图文混排（如杂志式左图右文），
<img>不该塞进<p>，而应与<p>平级，用 CSS 控制布局 -
<img>在<p>内只适合内联场景，比如小图标<img src="icon.png" alt="✓">紧挨着文字，此时需确保display: inline且无换行 - 旧版 HTML4 甚至不允许多媒体元素直接嵌套在
<p>中，部分校验器会警告
实现文本环绕图片的正确姿势：float + 清除浮动
真正可控的环绕效果靠 CSS float，而不是靠 HTML 嵌套结构。图片和段落应为同级兄弟元素，再用样式控制流向。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="article"> <img src="photo.jpg" alt="描述" class="left"> <p>这里是第一段文字，会绕着左边的图片排列……</p> <p>第二段也会继续环绕，除非被清除浮动。</p> </div>
对应关键 CSS：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
.left { float: left; margin-right: 12px; }—— 图片左浮，右侧留白 - 必须给后续
<p>设置overflow: hidden或使用::after清除浮动，否则父容器高度塌陷，文字可能跑到图片下方 - 现代项目更倾向用
display: flow-root替代overflow: hidden，语义更清晰
flex / grid 替代 float 的注意事项
若用 Flexbox 实现类似“左图右文”，结构上仍不该把 <img> 塞进 <p>。正确做法是用容器包裹图文，例如：
<div class="figure"> <img src="a.jpg" alt=""> <div class="caption"><p>这是说明文字</p></div> </div>
然后对 .figure 设 display: flex。这种结构清晰、响应友好，且避免了 float 的清除难题。
- Flex/Grid 下，
<img>和<p>是平级子项，语义合理 - 不要为了“看起来嵌套”而强行写成
<p><img><span>文字</span></p>—— 这会让 CSS 布局受限，无法单独控制图片尺寸或位置 - 移动端适配时，flex 可轻松设
flex-direction: column让图文垂直排列，float 则需额外媒体查询重置
inline-block 方案为何容易出错
有人尝试用 display: inline-block 让 <img> 和 <p> 并排，结果文字总对不齐或有空隙。这是因为：
-
<p>默认是块级元素，设inline-block后会受父容器字体大小影响，产生看不见的空白间隙 - 图片基线（baseline）默认对齐文本底部，导致上方留白，需加
vertical-align: top或middle - 宽度计算易失控：若未显式设
width，<p>会撑满容器，无法与图片并存
这类方案调试成本高，不如直接用 float 或 flex。
真正需要“环绕”的地方，别在 HTML 结构里硬嵌套，先理清图文关系是“附属说明”还是“独立模块”，再选 layout 方式。float 没过时，只是得配清除；flex 更稳，但结构必须松耦合。
