float: left 图片下方文本不环绕，因后续块级元素（如<p>）默认避开浮动区域；须确保文本为普通流内行内容、图片设明确宽度、用margin-right协调行高，或改用grid/flex布局。
float: left 为什么图片下面的文本不环绕
因为后续文本元素（比如 <p>）默认是块级元素，会独占一行并“避开”浮动区域，但只有当它们是**普通流内行内容**时才会真正环绕。常见错误是把文本包在另一个 <div> 或 <p> 里，又没处理它的清除或显示方式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保文本直接写在图片后面（同级、无包裹容器），或包裹它的容器设为
display: flow-root（现代推荐）或overflow: hidden（兼容旧版） - 图片必须有明确宽度，否则
float: left可能行为异常（尤其在弹性布局或 Grid 容器里） - 给图片加
margin-right（不是margin-left），否则文字会紧贴图片右侧边缘
margin-right 设置多少才合适
没有固定值，取决于字号、行高和视觉节奏。设太小文字挤着图片，太大则留白突兀。关键不是“像素数”，而是和 line-height 协调。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用相对单位：
margin-right: 1em或0.8em，这样随字体缩放自动调整 - 如果父容器有 padding，注意
margin-right是从图片右边缘算起，不是从容器边算 - 避免用
margin-left拉文本——它不解决环绕，只让整段偏移
现代替代方案：是否还该用 float
纯图文环绕场景下，float 依然有效且兼容性好（IE8+），但它的本质是“脱离文档流”，容易引发父容器高度塌陷、响应式错位等问题。CSS Shapes 和 shape-outside 能做更复杂的绕排，但浏览器支持有限（Chrome/Firefox 支持，Safari 部分支持）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 简单左图右文：用
float: left+overflow: hidden在文本容器上，稳妥 - 需要响应式（如小屏堆叠）：改用
display: grid或display: flex，但需放弃“环绕”，改用“并排+换行”逻辑 - 真要文字绕不规则图形（比如圆形头像）：用
shape-outside: circle()，但必须配float: left，且图片需是<img>（不能是背景图）
常见错误现象与排查
最常遇到的不是代码写不对，而是上下文干扰。比如 Flex 容器里对子元素设 float 会被忽略，Grid 容器里也一样。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 检查父容器是否用了
display: flex或display: grid—— 这两种布局下float失效 - 打开开发者工具，看图片元素的 computed 样式里
float是否为left，如果不是，说明被更高优先级规则覆盖 - 文本没环绕但图片左对齐了？大概率是文本容器触发了 BFC（比如有
overflow: auto），反而阻止了环绕 —— 改成overflow: visible或删掉 - 出现“文字从图片下方开始，而不是右侧”：图片后缺少足够长度的连续文本（比如只有几个字就换行），或者用了
<br>强制换行
display: flex 把 float 直接废掉。 
