float:left能让文字绕图走，因其使图片脱离文档流，而行内文字自动填补空白形成环绕；需设width、margin并清除浮动，现代可用shape-outside等替代但兼容性弱。
float:left 为什么能让文字绕着图片走
因为 float 会让元素脱离正常文档流，但其他行内内容（比如段落里的文字）会自动“填补”它原来占位的空白，形成环绕效果。这不是 CSS Grid 或 Flexbox 的布局行为，而是浮动机制的副作用——现在仍有效，但属于“遗留但可用”的方案。
常见错误现象：float:left 后，后续块级元素（如另一个 <div>）直接叠在图片下方、不换行，或者整个容器高度塌陷成 0。
- 必须给浮动元素设置明确宽度（比如
width: 200px），否则可能撑满父容器，失去“绕排”空间 - 父容器要清除浮动，否则高度计算失效；推荐用
overflow: hidden或伪元素::after清除，而不是过时的<div style="clear:both"></div> - 现代浏览器中，
float对 flex / grid 子项无效——如果图片在display: flex容器里，float:left直接被忽略
文字环绕图片时，怎么控制间距和对齐
靠 margin 控制图文距离，靠 vertical-align 调整图片基线位置（尤其当图片和文字高度不一致时）。
使用场景：新闻正文、博客文章、产品描述页——需要图文自然混排，而非严格栅格对齐。
立即学习“前端免费学习笔记（深入）”；
- 图片右侧留白：用
margin-right: 16px，别用padding（那是图片自身内边距） - 文字顶部对齐图片：给图片加
vertical-align: top；默认是baseline，容易导致文字底部被顶高 - 避免用
margin-top拉图片，它不影响环绕逻辑，只移动浮动框本身位置
float:left 在响应式页面里容易出什么问题
图片尺寸固定 + 浮动 + 小屏幕 = 文字被挤到极窄区域，甚至换行错乱，或图片溢出容器。
性能影响几乎为零，但维护成本高：一旦加了媒体查询改宽高，float 行为就得同步调，否则环绕断裂。
- 必须配合
max-width: 100%和height: auto防止图片撑破容器 - 小屏下建议用
@media (max-width: 768px)取消浮动：float: none，让图片独占一行 - 不要指望
float和object-fit联合控制裁剪——float不影响object-fit生效，但两者目标不同，混用易混乱
有没有比 float:left 更现代的替代方案
有，但要看需求。CSS Shapes（shape-outside）能实现不规则环绕，但兼容性差（Safari 支持弱）；display: flow-root 解决塌陷但不解决环绕；真正可落地的替代是 inline-block + vertical-align，或干脆用多列布局 column-count。
不过，只要你的场景只是“矩形图左/右 + 文字环绕”，float:left 依然最轻量、兼容性最好（IE9+ 都行）。
- 想用 Grid 实现类似效果？可以，但需把文字拆成多个
<span>放进不同网格单元，失去语义和可访问性 -
shape-outside: circle()看起来酷，但 Safari 目前不支持shape-outside与float同时作用于同一元素 - 别为了“不用 float”而强行上 CSS Shapes——除非设计师真给了水滴形图片并要求文字贴边绕
浮动不是过时，是收敛。它只做一件事：让文字绕开一块区域。这件事它做得干净，也最容易出错——错在忘记清浮动、错在没设宽、错在以为它能响应式自适应。把这三处盯死，float:left 还能再战五年。
