要让图片出现在文字右侧并实现文字环绕效果，关键不是把图片“放右边”，而是让图片左浮动——文字会自动填充它右侧的空间。核心设置：用 float: left这是最直接有效的做法。图片加 float: left 后脱离正常文档流，但段落文字仍按行内逻辑流动，自然绕到它的右侧和下方。 给 <img> 标签添加样式：float: left; 必须设定明确的 width（比如 width: 200px;），否则宽度不定会导致环绕错乱 加 margin-right 留出间隙，避免文字紧贴图片边缘，例如：margin-right: 16px;别忘了清理浮动影响浮动会让后续内容可能被“卡住”在图片下方，需主动清除。 推荐在图片所在容器上使用伪元素清除：container::after { content: ""; display: table; clear: both; } 或在图片之后加一个清浮层：<div style="clear: both"></div> 不建议仅靠 overflow: hidden，它虽能触发 BFC 清除浮动，但在 Flex/Grid 容器中可能引发布局截断响应式场景下的处理小屏幕下图文并排可读性差，应退回到上下结构。 用媒体查询重置浮动：@media (max-width: 600px)
要让图片出现在文字右侧并实现文字环绕效果，关键不是把图片“放右边”，而是让图片左浮动——文字会自动填充它右侧的空间。
核心设置：用 float: left
这是最直接有效的做法。图片加 float: left 后脱离正常文档流，但段落文字仍按行内逻辑流动，自然绕到它的右侧和下方。
- 给
<img>标签添加样式：float: left; - 必须设定明确的
width（比如width: 200px;），否则宽度不定会导致环绕错乱 - 加
margin-right留出间隙，避免文字紧贴图片边缘，例如：margin-right: 16px;
别忘了清理浮动影响
浮动会让后续内容可能被“卡住”在图片下方，需主动清除。
- 推荐在图片所在容器上使用伪元素清除：
container::after { content: ""; display: table; clear: both; } - 或在图片之后加一个清浮层：
<div style="clear: both"></div> - 不建议仅靠
overflow: hidden，它虽能触发 BFC 清除浮动，但在 Flex/Grid 容器中可能引发布局截断
响应式场景下的处理
小屏幕下图文并排可读性差，应退回到上下结构。
立即学习“前端免费学习笔记（深入）”；
- 用媒体查询重置浮动：
@media (max-width: 600px) { img { float: none; display: block; margin: 0 auto; } } - 此时图片居中独占一行，文字在其下方正常显示
- 确保
alt文本完整，提升无障碍访问体验
不推荐的替代方式
有些写法看似能“把图放右边”，但实际不是环绕：
-
display: inline-block：图片和文字只是同行显示，换行后文字不会绕排，而是另起一行顶格开始 -
position: absolute：图片完全脱离文档流，文字对其“视而不见”，缩放或字体变化极易重叠或错位 -
align="right"（HTML 属性）：已废弃，且会让文字绕到图片左侧，与需求相反
