图片不贴左主因是父容器内边距、图片为inline默认行为或浮动未清除；文字跑下方是因浮动脱离文档流，需用clear:both或overflow:hidden解决。
float实现左图右文时图片不贴左怎么办
图片没靠左，大概率是父容器有内边距、图片被设置了 display: block 以外的默认行为（比如 inline），或者外层元素触发了 BFC 但没配对清除浮动。
- 检查图片是否被意外加了
margin或padding，特别是父级div的padding - 确保图片写成
<img src="..." style="float: left;">，别依赖外部 CSS 且未生效 - 如果父容器用了
overflow: hidden或display: flow-root，它会创建新 BFC，此时浮动不会撑高父容器——但这不是图片不贴左的原因，而是后续内容塌陷的诱因
文字内容跑到了图片下方而不是右边
这是最典型的清除浮动缺失问题：浮动元素脱离文档流，后续块级元素直接从顶部开始渲染，无视浮动区域。
- 在文字容器前加一个带
clear: both的空标签，例如<div style="clear: both;"></div> - 更稳妥的做法是在文字容器自身加
overflow: hidden（触发 BFC）或display: flow-root（现代标准写法） - 避免用
float: right给文字——这会让布局逻辑变反，维护困难，也容易和图片浮动冲突
float布局在移动端缩放后错位
float 本身不响应尺寸变化，错位根源通常是图片宽高没约束，或文字容器最小宽度超出视口。
- 给图片设
max-width: 100%和height: auto，防止溢出 - 文字容器不要设固定
width，优先用min-width: 0配合overflow-wrap: break-word - 慎用
float做响应式主布局——它在小屏上极易失控；真要兼容，建议用flex替代，float仅用于图文环绕等局部场景
为什么现在还用float做左图右文
不是“该用”，而是“还在用”：老项目维护、邮件模板兼容（Outlook 只认 float）、或需要支持 IE8 等古董浏览器时，float 是唯一可靠选择。
立即学习“前端免费学习笔记（深入）”；
-
flex在 IE10+ 才稳定，IE9 及以下必须降级；grid更晚，基本不考虑 - 邮件客户端如 Gmail、Apple Mail 对
flex支持极差，float+inline-block仍是事实标准 - 注意：CSS 中写了
float后，元素自动变成块级，无需再写display: block
float 布局真正的复杂点不在写法，而在清除浮动的时机和方式——同一页面里混用 overflow: hidden、clear 和 flow-root 容易互相覆盖，导致某处突然不生效。这时候得逐层查 computed style，而不是改完就以为没问题。
