图片与文字浮动错位的核心原因是图片未限宽且脱离文档流，导致文字环绕异常；需限制图片尺寸（max-width: 100%; height: auto）、统一浮动方向、清除父容器浮动（overflow: hidden 或 display: flow-root），并确保文字容器宽度充足、换行正常。
图片与文字在浮动布局中错位，核心原因是图片未限制宽度且脱离文档流后，文字环绕时缺乏明确的尺寸约束，导致换行、对齐或容器塌陷异常。解决的关键是控制图片尺寸 + 明确浮动方向 + 修复父容器。
限制图片宽度，避免撑破容器
默认图片按原始尺寸渲染，若宽度过大，会突破父容器或挤压文字空间。必须显式设置 max-width: 100% 或具体像素/百分比值，并配合 height: auto 保持比例。
- 推荐写法：img { max-width: 100%; height: auto; } —— 自适应父容器宽度，响应式友好
- 若需固定尺寸（如头像），用 width: 80px; height: 80px; object-fit: cover;
- 切忌只设 width 不设 height 或 object-fit，否则可能拉伸变形或留白错位
统一 float 方向并匹配文字流向
浮动方向（float: left 或 float: right）必须与文字期望环绕位置一致。常见错误是图片 float:right 但文字仍从左侧开始顶格，造成视觉“跳空”。
- 左图右文：图片加 float: left;，文字自然流到右侧
- 右图左文：图片加 float: right;，文字从左侧正常起始，绕至图片左边
- 确保图片前后无强制清除或意外 margin/padding 干扰文字首行定位
清除浮动，防止父容器塌陷
浮动元素脱离文档流，若父容器没有其他非浮动内容，高度会坍缩为 0，导致后续元素上移、文字“沉底”或布局错乱。
立即学习“前端免费学习笔记（深入）”；
- 简单可靠方案：在父容器末尾加
- 现代推荐：给父容器设 overflow: hidden; 或 display: flow-root;（兼容性好，无副作用）
- 避免仅靠文字自身清除，它无法撑开父容器高度
检查文字容器的最小宽度和换行行为
即使图片尺寸合理，若文字所在块级元素（如 p、div）宽度太小，或设置了 white-space: nowrap 等，也会导致文字无法正常折行，看起来像“被推开”或错位。
- 确认文字容器有足够宽度（例如不被浮动图片过度压缩）
- 移除不必要的 white-space: nowrap; 或 overflow: hidden;
- 必要时给文字容器加 overflow-wrap: break-word; 防止单词过长撑开布局
