float让文字绕行是因为其使元素脱离文档流并浮动，后续普通流内联内容自动填充旁白空白；需注意浮动元素宽度、父容器显示模式及清除浮动方式。
float 为什么会让文字自动绕行
因为 float 的本质是让元素脱离文档流、向左或右“飘”起来，而后续的**普通流内联内容（如文字、span）会重新计算可用空间，自动填满浮动元素旁边的空白**。这不是 CSS 特意为图文混排设计的功能，而是脱离流 + 行内内容重排的自然结果。
常见错误现象：img 加了 float: left，但右侧文字没贴上来，反而换行了——大概率是图片父容器有 display: flex 或 display: grid，或者图片本身被包裹在 div 里且该 div 没设宽高、无法收缩，导致浮动失效。
- 只对
display值为block、table、inline-block等支持浮动的元素生效；inline元素加float会隐式转成block - 浮动元素必须有明确宽度（否则可能撑满父容器，失去“绕行”空间），常用
width: auto配合max-width: 100%控制图片尺寸 - 文字内容必须是紧跟在浮动元素之后的普通流内容，不能用
position: absolute或另一个float元素去“模拟”文字区域
清除浮动的三种可靠方式及适用场景
不清除浮动，后续元素会塌陷、错位，这是图文混排中最常踩的坑。不要依赖 clear: both 加在下一个块级元素上——它只解决“下一个”，不解决父容器高度丢失问题。
-
伪元素清除（推荐）：在浮动元素的父容器上加
::after，设置content: ""、display: table（或block）、clear: both。兼容性好，无额外 HTML，适合通用图文容器 -
BFC 触发清除：给父容器设置
overflow: hidden、overflow: auto或display: flow-root。其中display: flow-root是最干净的现代方案，不会意外裁剪溢出内容 -
clearfix 类（传统方案）：如果项目还需支持 IE8，可复用经典
.clearfix::after写法，但注意zoom: 1是 IE hack，现代项目不必加
float 图文混排中容易被忽略的细节
视觉上“看起来对了”，不代表布局稳定。很多线上页面在缩放或换字体后突然错乱，根源就在这些细节。
立即学习“前端免费学习笔记（深入）”；
- 浮动元素后的第一段文字，顶部默认与图片顶部对齐；如需基线对齐（更自然），给图片加
vertical-align: middle或text-top，但注意这仅对行内上下文有效 - 当图片高度大于文字行高时，文字末行可能悬空在图片下方——这不是 bug，是行盒（line box）自然行为；可通过给文字容器加
padding-bottom或用margin-bottom微调 -
float不响应式：在小屏下若未配合媒体查询重置float: none和宽度，图文会挤成一团甚至重叠；务必检查断点处的float状态 - 多个浮动元素并排时，若高度不一致，后续浮动会卡在“最高那个”的底部右侧，造成阶梯状错位；此时应考虑改用
display: inline-block或现代布局
现在还该用 float 做图文混排吗
纯图文绕排场景下，float 依然有效、轻量、兼容性极佳（IE6+ 都支持），且不需要 JS 辅助。但它的能力边界非常清楚：只适用于“一个图 + 一段连续文字”的简单组合。
一旦涉及多图穿插、响应式网格、垂直居中、等高列或需要精确控制间隙，float 就会迅速变得脆弱。这时候应该直接上 display: grid（配 grid-template-areas）或 shape-outside（实现文字绕不规则图形），而不是硬调 float 的 margin 和 clear。
真正难的不是写对 float，而是判断什么时候该停手、换方案。
