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