根本原因是float只影响后续普通流中的块级元素；图片需与文字同属一个未触发bfc的块级容器，设置明确宽高，文字容器加margin-left而非img加margin-right，响应式需配合媒体查询，现代推荐grid/flexbox替代。
float 实现左图右文时，图片不贴左、文字不上浮？
根本原因是 float 只影响后续**普通流中的块级元素**，而如果图片后面紧跟的是内联内容（比如段落文字），它确实会上浮绕排——但前提是父容器没触发 BFC 或存在清除干扰。常见错误是把 img 单独 float，却不控制其后文本的包裹行为。
- 确保图片和文字在同一个块级容器内（如
<div>），且该容器未设置 <code>overflow: hidden或display: flex等会隐式创建 BFC 的属性（否则浮动失效） -
img加float: left后，紧随其后的文本会自然环绕；但若中间有<br>、空<p></p>或clear: both元素，就会打断绕排 - 图片需有明确宽高（或通过
max-width: 100%限制），否则在响应式场景下可能溢出容器导致布局错乱 - 给
img加margin-right: 16px通常无效——浏览器会把它“吸”进浮动流边缘；改用margin-left: 16px（对左浮动图）反而更可靠 - 更稳妥的做法：给文字所在标签（如
<p></p>）设margin-left: 120px（略大于图片宽度），强制文本从图片右侧开始排布 - 避免对浮动元素同时设
margin和padding，容易引发 IE 兼容问题；现代项目建议统一用padding控制图文间距 - 必须配合
width或max-width显式约束图片尺寸，否则小屏下图片压缩，但文字仍按原宽度绕排 - 不要依赖
float做复杂响应式布局；简单左图右文可加媒体查询：@media (max-width: 768px) { img { float: none; width: 100%; } p { margin-left: 0; } } - 注意移动端 Safari 对
float+line-height的渲染差异：文字行高过大时可能“跳过”图片顶部，需检查line-height是否合理 - 如果必须兼容 IE9+，
float仍是可行方案，但要严格控制父容器、避免嵌套浮动、手动清除（如::after { content: ""; display: table; clear: both; }） - 现代项目中，
display: grid配合grid-template-columns: 120px 1fr更直观，且自动处理间距、对齐、响应式 - 最容易被忽略的一点：浮动元素脱离文档流后，其父容器高度为 0——这会导致背景色、边框消失，必须主动清除或触发 BFC
文字离图片太近，margin 和 padding 怎么加才不破坏浮动？
浮动元素的外边距（margin）会与相邻文本产生“塌陷”或“吸附”，尤其 margin-right 对右侧文字几乎无效；真正起作用的是给文字容器（如 <p></p>）加 margin-left，或用 padding 在图片侧留白。
响应式下图片变小，文字却卡在旧位置？
这是 float 的固有限制：它基于当前渲染尺寸计算浮动区域，不会自动重排。当图片缩放（如 max-width: 100% + height: auto）而容器宽度变化时，文字可能残留上一帧的环绕路径。
为什么现在不推荐用 float 做图文排版？
不是不能用，而是维护成本高：清除浮动（clear）、父容器高度塌陷、多列浮动嵌套时的顺序依赖，都会让样式变得脆弱。CSS Grid 和 Flexbox 能直接声明“图片左、文字右”，无需考虑浮动流、BFC 或清除逻辑。
立即学习“前端免费学习笔记（深入）”；
