float: left 实现图文混排易出错，因其半脱离文档流，导致窄屏换行异常、父容器塌陷、clear行为断点不一致、图片变形及多图高度不一时布局不可控。
float: left 能让图片靠左、文字环绕右侧，但现代项目里它只是“能用”，不是“该用”——尤其当你需要响应式、等高、或内容高度不一时，float 很快会暴露计算不可控、清除混乱、断点失效的问题。
为什么 float: left 在图文混排中容易出错？
浮动本质是半脱离文档流，后续块级元素（比如 p 或 h3）的垂直位置会受其影响，但水平尺寸计算又不参与 flex/grid 流。这导致：
- 文字在窄屏下可能卡在图片右上角不动，不自动换行到底部
- 父容器没触发 BFC（比如没设
overflow: hidden或display: flow-root），后续元素布局被“吸”上去 - 加了
@media后，clear: both行为在不同断点下不一致，调试时得反复刷新看渲染结果 - 如果图片原始宽高比异常（比如 1000×50），
width: 150px会拉伸变形，而只写width: 100%又可能撑破容器
float: left 必须配的三行 CSS
若仍需用 float（如维护老项目、兼容极旧环境），这三行不能少：
.article img {
float: left;
max-width: 100%;
height: auto;
display: block;
margin-right: 1rem;
}
说明：
-
max-width: 100%防止图片超出父容器，比width: 100%更安全（原始尺寸不影响 flex 计算） -
height: auto保持宽高比，避免压缩或拉伸 -
display: block消除<img>默认 inline 带来的底部空白 -
margin-right是唯一推荐的间距方式；别用padding在父容器上“挤”文字，那会破坏流式逻辑
移动端文字在上、图片在下，别用 float 切顺序
float 本身不支持视觉顺序翻转。想在小屏实现“文字在上、图片在下”，不能靠改 float 值，而要：
- 桌面端保留
float: left结构 - 移动端用媒体查询把父容器设为
display: flex; flex-direction: column - 再给图片加
order: 2、文字容器加order: 1 - 注意：必须确保文字和图片是同一父容器的直系子元素，中间不能嵌套额外
div
否则 order 不生效，或者只在当前 flex 行内起作用，导致多图卡片视觉错位。
真正难的不是让第一张图浮起来，而是当页面有 12 张图、每张图高度不同、文字行数动态变化时，float 的行为是否还能 predictably consistent——多数时候答案是否定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
