图文环绕错位的主因是浮动未清除或方向不当，解决需用clear属性（如clear: both）、触发BFC（如overflow: hidden）或改用grid/flex布局。
文本环绕图片时出现错位、重叠或换行异常，通常是因为浮动元素未被正确清除，或者浮动方向与内容流向不匹配。解决的核心是控制浮动的范围和影响，让后续内容按预期排布。
用clear属性阻止后续内容绕过浮动元素
当图片左浮动后，后面的文字会绕到右侧；但如果接下来的段落也想从下一行完整开始，就需要清除浮动影响。
- clear: left：确保元素不紧贴左侧浮动元素，强制换行显示
- clear: both：最常用，同时避开左右两侧浮动，适合段落、标题等块级内容
- 可加在需要“重启布局”的元素上，比如图片后的第一个段落：p { clear: both; }
检查浮动方向是否与文本流一致
中文默认从左到右书写，若图片设为float: right，文字会从左边开始环绕——此时若容器宽度不足，容易挤出边界或换行混乱。
- 左图右文：用float: left，符合常规阅读习惯，兼容性好
- 右图左文：用float: right，需确保父容器足够宽，且后续内容有足够空间
- 避免对同一行多个浮动元素混用左右方向，易导致不可预测的堆叠
给父容器添加清除浮动（BFC触发）
如果整个图文区块内部浮动未闭合，外部布局可能塌陷，连带影响周围元素。
立即学习“前端免费学习笔记（深入）”；
- 给图片所在容器（如.article-content）设置overflow: hidden或display: flow-root，创建BFC自动包裹浮动子元素
- 或使用伪元素清除法：.container::after { content: ""; display: table; clear: both; }
- 这样既不影响语义结构，又能稳定图文区域高度
优先考虑现代替代方案
float本意是实现文字环绕印刷排版，但用于整体页面布局已逐渐被更可控的方式取代。
- 简单图文环绕可用shape-outside配合float实现非矩形环绕（如圆形头像）
- 复杂版式建议改用display: grid或display: flex控制整体结构，图文关系用align-self或margin微调
- 纯文字环绕需求仍可保留float，但务必搭配clear或BFC处理收尾
