float实现文字环绕图片时，图片必须在html中写在文字前面；需清除父容器塌陷、正确设置图片外边距方向、避免与flex/grid混用。
float 实现文字环绕图片时，图片必须在 HTML 中写在文字前面
这是最容易被忽略的前提。浏览器渲染时，float 只会影响后续的**块级流内容**，如果 <img> 写在段落后面，文字已经“流完”了，再 float 图片也没法让上面的文字绕回来。
常见错误现象：float: left 了图片，但文字还是从图片下方开始，没环绕。
- 检查 HTML 结构：确保
<img>标签出现在<p></p>或其他文本容器的前面 - 不要依赖 CSS 顺序去“调整”浮动生效时机；HTML 流式顺序决定浮动作用范围
- 如果必须后置图片（比如 CMS 输出不可控），改用
shape-outside或 Flex/Grid 布局替代
float 后父容器塌陷，文字可能跑出预期区域
float 会让元素脱离文档流，导致其父容器高度坍缩为 0，进而使后续内容（比如另一个 <p></p>）顶上来，破坏图文布局节奏。
使用场景：图文混排常嵌套在 <article></article> 或 <section></section> 中，这些容器需要包裹住浮动子元素。
- 给父容器加
overflow: hidden（最轻量，兼容性好） - 或用伪元素清除浮动：
::after { content: ""; display: table; clear: both; } - 避免用
clear: both放在下一个兄弟元素上——它只清自己前面的浮动，不保证父容器撑开
文字紧贴图片边缘，行高和 margin 控制不好会显得拥挤
浮动本身不提供图文间距，margin 必须显式设置在 <img> 上，且要注意方向与文字流向匹配。
参数差异：margin-right 对 float: left 的图片生效（文字从右边绕），margin-left 对 float: right 生效；别反了。
- 至少设
margin-right: 1rem（左浮动）或margin-left: 1rem（右浮动） - 避免只设
margin四值——上下 margin 在浮动中常无效，优先用左右 - 如果文字出现断行错位，检查是否用了
line-height过小，或图片vertical-align是默认的baseline，可尝试改成top或middle
现代项目里 float 图文混排容易和 Flex/Grid 冲突
当页面其他部分用 display: flex 或 display: grid 布局时，浮动元素可能被强制拉平、失去环绕效果，尤其在设置了 align-items: start 或容器有 min-height 等约束时。
性能影响不大，但兼容性和维护性差：float 是为排版设计的旧机制，而现代布局系统默认忽略浮动对自身子项的影响。
- 同一容器内别混用
float和display: flex - 如需响应式图文环绕（比如小屏取消环绕），
float需配合媒体查询重置，不如shape-outside+clip-path可控 - 真正要长期维护的项目，建议直接用
column-count（多栏）或shape-outside: margin-box替代
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
