float: left 是唯一能真正实现文字环绕的 css 方式，因仅 float 可让行内内容自动折行绕至图片下方；需图片前置、禁用 display: block/margin: auto，并通过 margin-right（左浮）或 margin-left（右浮）控制间距，父容器须触发 bfc 防塌陷。
float: left 是唯一能真正实现环绕的 CSS 方式
Flex 和 Grid 布局无法触发文字环绕行为，它们只是把图片和文字并排放置，后续段落不会“绕”到图片下方。只有 float 能让行内内容（包括文字）响应浮动区域并自动折行环绕。
关键前提是：<img> 必须在 HTML 中位于文字之前，且不能被设为 display: block 或 margin: auto——这些会切断它参与行内流的能力。默认 <img> 就是行内替换元素，直接加 float: left 即可生效。
- 右浮动图片用
float: right，文字从左侧环绕 - 左浮动图片用
float: left，文字从右侧环绕 - 别给图片父容器设
display: inline-block，否则整个容器变成“一块”，文字不再绕图
文字紧贴图片或留白过大？调 margin 而不是 padding
文字与图片之间的水平间距，只由图片自身的 margin-right（左浮时）或 margin-left（右浮时）控制。加在文字容器（比如 <p></p>）上的 margin 完全无效，因为文字是行内流，只认浮动元素的外边距。
常见错误是误改 padding，结果图片内部留空，但文字位置纹丝不动。
- 左浮动图片：加
margin-right: 16px控制右侧文字距离 - 右浮动图片：加
margin-left: 16px（别写反） - 多段落场景下，加
margin-bottom: 12px防止下一段文字顶到图片底部
文字跑到图片下面、不环绕？大概率是父容器塌陷
浮动元素脱离文档流后，如果父容器没触发 BFC（块级格式化上下文），就会高度塌陷，导致后续文字从顶部开始排布，看起来像“跳到了图片下面”。
这不是文字的问题，而是父容器没撑开高度，让浮动“悬空”了。
- 最兼容方案：给父容器加
overflow: hidden或overflow: auto - 现代推荐：用
display: flow-root（Chrome 64+/Firefox 58+ 支持，语义清晰） - 避免只靠
height硬撑，内容动态变化时容易错位 - 别依赖
::after清除浮动却忘了写content: ""和display: table，否则无效
响应式缩放后间距崩坏？别只靠固定像素值
margin-right: 16px 在大屏上合适，小屏可能太挤；图片缩放后，固定 margin 会让文字离图过远或过近。这不是 bug，是 float 的固有局限——它不感知容器尺寸变化。
真要兼顾响应式，得放弃纯 float 方案，转而用 CSS Shapes（支持轮廓绕排但兼容性差）或服务端/JS 动态注入 margin 值。但多数项目只需在媒体查询里微调：
@media (max-width: 768px) { img { margin-right: 8px; } }- 配合
max-width: 100%和height: auto防止图片撑破容器 - 注意：屏幕阅读器读取顺序仍按 HTML 结构，浮动不影响语义流，这点比 Flex/Grid 更稳妥
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
