float图文混排错位主因是图片默认内联属性带底部间隙、父容器margin干扰、BFC未触发及清除失效；应设图片display:block、父容器overflow:hidden触发BFC、用伪元素清除浮动。
float 图文混排时图片不贴文字边，反而换行了
这是最常见错觉：以为 float: left 一设就自动“文字绕图”，结果图片下面空一大块，文字从下一行开始。根本原因是图片父容器（比如 <p>）有默认的 margin-bottom，或图片本身是内联元素、带底部空白间隙。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片加
display: block，干掉基线对齐带来的留白 - 确保图片所在段落没有意外的
margin或padding干扰流式布局 - 文字容器（如
<p>）不要设置clear，否则会强制断行 - 如果图文混排在响应式环境里，
float容易被后续内容顶开，优先考虑用shape-outside或现代方案（但那是另一回事）
float 后文字缩进/首行对齐混乱
浮动元素脱离文档流，文字会紧贴浮动框边缘，但中文段落常需首行缩进 2em，而这个缩进是从容器左边界算起，不是浮动图右边——导致第一行看起来“撞进”图片里。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给文字容器（如
<p>）加margin-left模拟“绕排后缩进”，数值略大于图片宽度 + 间距，比如margin-left: 140px - 更稳妥的做法是用
text-indent配合padding-left：先用padding-left留出图片空间，再用text-indent控制首行缩进 - 避免对浮动图片本身设
margin-right来“推文字”，这会让小屏幕下文字被挤出视口
IE8–IE11 下 float 图文错位或重叠
老版本 IE 对 float 和 hasLayout 的处理很敏感，尤其当图片高度不确定、父容器没触发 BFC 时，文字会“塌陷”到图片下方甚至覆盖上去。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给图片父容器（如
<div class="article-content">）加overflow: hidden或zoom: 1触发 BFC - 图片必须声明明确的
width和height（哪怕用auto），否则 IE 可能无法正确计算浮动占位 - 避免嵌套浮动：比如图片套一层
<span>再浮动，IE 会多算一层行盒，加剧错位
float 图文混排后清除失效，后续内容上浮
clear: both 不生效？常见于清除元素没“撑开”自身高度，或者它和浮动元素不在同一 BFC 上下文中。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不用空标签
<div style="clear:both"></div>，改用伪元素清除：::after { content:""; display:table; clear:both; } - 清除元素必须紧跟在浮动内容之后，且不能被
position: absolute或display: inline干扰流式位置 - 如果清除的是多个浮动块（比如连续几段图文），确保清除节点放在所有浮动容器的共同父级末尾，而不是每段内部
float 做图文混排真正难的不是“怎么让它动起来”，而是“怎么让它在各种字体大小、行高、缩放比例、旧浏览器下都稳住位置”。一旦出现错位，优先查图片 display、父容器 BFC、以及清除节点是否真的参与了文档流——这些地方不动，调 margin 和 padding 都是临时糊墙。
