错位是行框基线、图片占位和父容器塌陷三者叠加所致；float不导致浮动失效，vertical-align: baseline使文字行框底对齐图片基线，加vertical-align: top可解决。
错位不是浮动失效，而是行框基线、图片占位和父容器塌陷三者叠加的结果。
float 后文字顶部对不齐图片上沿
默认 vertical-align: baseline 让文字行框底部对齐图片的基线（即字母“x”的下沿），而图片本身有下降部预留空间，导致视觉上“飘起来”。img 还是 inline 元素，哪怕加了 float，这个对齐逻辑依然生效。
- 给图片加
vertical-align: top，强制按内容盒顶部对齐 - 避免在父容器设
font-size: 0后忘记重置文字区域的font-size - 如果图片带
border-radius或box-shadow，确认没意外撑高外边距边界
第一段绕得好，第二段却从图片底部开始
这不是文字的问题，是父容器高度塌陷——它根本“看不见”浮动的 img，计算自身高度时直接跳过，后续块级元素（比如第二个 p）就按文档流原位置渲染，自然落到图片下方空白处。
- 现代方案：给父容器加
display: flow-root，轻量且无副作用 - 兼容旧浏览器：用
.parent::after { content: ""; display: table; clear: both; } - 慎用
overflow: hidden：可能裁掉position: absolute的下拉菜单或阴影
文字紧贴图片、首行缩进异常、行高忽高忽低
浮动本身不产生间距，文字环绕的是图片的 margin 边界。如果只设 margin-bottom 或漏写方向性 margin，行框就会在像素级抖动中反复重排。
- 左浮动图片必须加
margin-right（如margin-right: 12px），右浮动则加margin-left - 别用简写
margin: 12px，上下 margin 会干扰 line-height，造成段落间错位 - 检查文字容器是否误设了
padding-left或过大line-height，它们会放大对齐误差
响应式缩放后错位突然加剧
浮动布局对像素四舍五入极其敏感。PC 上刚好排满三列，缩到平板尺寸后总宽超 1px，整行就塌；图片 max-width: 100% 若没配 height: auto，等比缩放失败也会拉扯行框。
- 图片必须写
max-width: 100%; height: auto;，否则响应式下变形或留白 - 清除浮动的规则（如
display: flow-root）要写在媒体查询内，不能被overflow: visible覆盖掉 - 避免在浮动项上用
transform: scale()，它不改变文档流占位，但会放大视觉错位
最容易被忽略的是：你调的不是“文字怎么绕”，而是“行框怎么算高度”——所有错位都发生在行框与浮动锚点的耦合层，不在 DOM 结构里，也不在元素自身样式里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
