现代布局中不推荐用 float 实现图文混排，因其易导致父容器塌陷、错位及响应式困难；应优先选用 display: flow-root 清除浮动，或直接使用 Grid/Flex 布局替代。
float 会让文字环绕图片，但现代布局中它已不是首选方案
直接用 float 实现图文混排确实能工作，但它本质是为印刷排版设计的“浮动脱离文档流”机制，容易引发父容器塌陷、后续元素错位、响应式适配困难等问题。除非维护老项目或需兼容 IE8–9，否则不建议新项目用 float 做图文环绕。
用 float:left 实现左图右文时必须清除浮动
常见错误是只给图片加 float: left，结果父容器高度为 0，下方文字或区块直接“吸顶”到图片上方。这是因为浮动元素脱离了正常流，父容器无法感知其高度。
解决方法是在图文容器末尾添加清除浮动的元素，或对父容器使用 overflow: hidden（有截断绝对定位子元素的风险）或 display: flow-root（推荐，专为此设计）：
@@##@@这里是环绕的文字内容……
立即学习“前端免费学习笔记（深入）”；
更稳妥的写法是直接设置父容器：
@@##@@文字自动环绕，父容器正确撑开高度。
float:right 和 margin 配合控制图文间距与对齐
float: right 同理，但要注意：文字默认从顶部开始环绕，若想让文字从图片中部或底部开始绕排，float 本身做不到——它没有“文字环绕形状”控制能力。只能靠调整图片尺寸、外边距或用 shape-outside（需配合 float，且仅支持基础几何形）。
-
margin-left或margin-right控制图与文的水平间隙 - 垂直方向无天然“对齐基准”，需靠
vertical-align（对 inline 元素有效）或包裹一层display: inline-block容器微调 - 避免对浮动图片设
margin-bottom，它可能被忽略或引发意外重排
真正现代的做法：用 CSS Shapes 或 Grid/Flex 替代 float
如果需要复杂绕排（比如文字绕过不规则图片轮廓），float + shape-outside 是唯一原生方案，但兼容性有限（Chrome/Firefox 支持，Safari 需前缀且限制多）。更实际的选择是：
- 简单左/右图文：用
display: grid划分区域，文字用grid-area占位，图片独立格子 —— 完全可控，无塌陷 - 响应式需求强：用
flex+align-items: flex-start，配合margin控制间隙 - 追求语义与可访问性：图片用
绕排不是目的，信息清晰传达才是。多数场景下，“图片左对齐 + 文字缩进一段”比强行环绕更易读，也更少出问题。
