答案：文字基线错位需统一行框高度或改用inline-block+vertical-align，因float元素不支持vertical-align；真正生效的是给父容器设固定line-height，或移除float后将图文设为inline-block并加vertical-align: middle。
float图片后文字基线错位怎么调
文字“吊高”或“下沉”，不是图片没对齐，而是浏览器按baseline对齐浮动元素和行内内容，而图片默认基线在底部，文字基线在中下部，天然不重合。此时vertical-align对float元素完全无效——规范里就不管它。
真正能起效的是两种方式：
- 给包含图文的父容器设固定
line-height（如line-height: 1.5或line-height: 24px），让行框高度统一，单行文字视觉居中 - 把图片和文字都改成
display: inline-block，再加vertical-align: middle——前提是必须移除float，否则vertical-align被忽略 - 如果文字换行，
line-height会失效，这时只能切到display: flex布局
margin-right/ margin-left为什么加了没反应
常见错误是把margin写在文字容器（比如p）上，或者用margin: 10px这种简写。文字环绕的是浮动元素的外边距边界，这个边界只由图片自身的margin-right（左浮动时）或margin-left（右浮动时）决定。
必须满足三个条件margin才生效：
-
margin写在img标签上，不是父容器或文字元素 - 显式声明方向，例如左浮动只认
margin-right: 16px，margin-top和margin-bottom会影响段落间距但不改变环绕位置 -
img要设display: block，否则在部分浏览器中margin不渲染
第二段文字突然掉到图片下面怎么办
这不是文字“不绕”，而是父容器没包裹浮动元素，高度塌陷，导致后续段落从文档流顶部开始排布，视觉上像“掉下来”。典型表现是第二段开头空一大块，或整段沉底。
解决关键是让父容器建立BFC，安全又干净的方式是：
- 给图片的**直接父容器**加
display: flow-root（Chrome 64+/Firefox 58+/Safari 12.1+ 支持） - 避免用
overflow: hidden——它虽能触发BFC，但可能意外裁剪带阴影、transform偏移或弹层的子元素 - 别在文字
p上加clear: both，这会让整段换行，破坏环绕逻辑
响应式下小屏图文间距崩坏怎么修
媒体查询里只改图片宽度却不重置浮动相关样式，是高频翻车点。比如margin-right: 16px在320px屏幕上变成“右边空出16px却无处可绕”，文字被迫折行，间距失真。
稳妥做法是在断点里一并清理浮动逻辑：
- 小屏下统一移除：
float: none、clear: none、margin-left: 0、margin-right: 0 - 图片回归文档流，配合
text-align: center居中，文字自然上下排列 - 若仍需环绕效果，改用
shape-outside，但注意shape-outside: circle()在Safari支持不稳定，慎用 - 测试缩放200%时，优先用
rem或em写margin，避免像素值失真
display: flex替代——align-items: center一行解决垂直居中，不用操心基线、行高、BFC或清除浮动。但若老项目必须保留float，那就得盯紧margin加在哪、display设没设、父容器有没有flow-root——少一个，文字就可能“飘”走。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
