浮动本质是让元素脱离文档流并靠边，文字环绕需确保父容器不塌陷、正确清除浮动，并通过margin和vertical-align控制间隙与对齐；现代项目优先用grid/flexbox。
float 会让文字绕着图片跑，但得先搞清谁包着谁
浮动的本质是让元素脱离文档流、向左或右“靠边站”，其他内容（主要是文本）会自动环绕它。关键不是给 img 加 float 就完事——如果图片在段落里，但段落本身没设置 overflow 或清除机制，后续文字可能塌陷、错位，甚至跑到图片底下“钻空子”。
- 正确做法：把
img和紧邻的p或div放进同一个父容器（比如article），再对img单独设float: left或right - 常见错误：
img浮动了，但父容器高度塌陷（表现为后面的内容直接顶上来），这时得加overflow: hidden或用::after清除浮动 - 文字对齐依赖行高与内边距：浮动后文字默认顶着图片边缘，若想留空隙，给
img加margin-right（左浮动时）或margin-left（右浮动时）
多图混排时，float 的顺序和宽度控制比样式更重要
浏览器按 HTML 顺序逐个渲染浮动元素，float 不会自动“换行对齐”。如果你放了三张图都设 float: left，它们会从左到右排开——但前提是父容器够宽；一旦总宽度超限，第三张就会掉到下一行，且可能卡在第一张图下方（因为第一张还占着“浮动位置”）。
- 必须显式控制每张图的宽度：用
width+box-sizing: border-box，避免padding/border撑破布局 - 避免用
float: left+float: right混用在同一父容器内，容易引发不可预测的包裹行为（尤其 IE 兼容模式下） - 更稳的替代方案：用
display: inline-block配合vertical-align: top，但要注意 HTML 中的换行符会变成空格，需删空格或设父容器font-size: 0
文字环绕不均匀？检查 line-height、vertical-align 和图片 display 类型
浮动图片默认是 display: inline，而文字是行内内容，二者基线对齐方式会影响首行文字是否“悬空”或“压底”。常见现象是第一行文字飘在图片顶部，第二行才贴边——这通常不是 float 错，而是 vertical-align 没调好。
-
img默认vertical-align: baseline，会让底部对齐文字基线，造成头顶留白；改成vertical-align: top或middle更可控 -
line-height过大会拉高行框，使文字看起来“浮起来”，建议设为无单位数值（如1.4），避免继承放大 - 如果图片被套了
a标签又没设display: block，点击区域可能错位，且影响浮动稳定性
现代项目里还该用 float 做图文混排吗
能用，但不推荐新项目从头写 float 布局。CSS Grid 和 Flexbox 对图文混排的支持更直观、可控，比如 shape-outside 配合 float 可实现文字绕不规则图形，但兼容性差（IE 完全不支持）；而 Grid 的 grid-template-areas 能一眼看清图文位置关系。
- 维护老项目时，优先修 bug 而非重写：重点查
clear是否漏加、overflow是否设错、width是否用百分比导致小屏溢出 - 如果必须兼容 IE8+，
float仍是稳妥选择，但要接受它对响应式支持弱——媒体查询里改float方向时，记得同步调整margin和清除逻辑 - 真正难搞的不是 float 本身，是当图文混排遇上异步加载图片、字体加载延迟、或者 CMS 插入的未标准化 HTML 时，布局瞬间崩坏——这时候靠 CSS 已不够，得加 JS 监听图片加载完成再触发布局重算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
