用 float 实现图文环绕需同时处理三件事：图片浮动方向与尺寸、图文间距（用 margin 而非 padding）、清除浮动污染；图片须前置html中，小屏需媒体查询重置为 block 居中。
直接用 float 就能实现标准图文环绕，但必须同时处理三件事：图片的浮动方向与尺寸、文字与图片之间的间距、以及浮动对后续元素的污染。缺一不可，否则要么文字贴图、要么下一段标题跑进图片里。
给图片加 float 并限定尺寸
浮动本身不控制宽高，如果图片没设 width，在窄容器中可能撑破布局或导致文字换行异常。
-
float: left或float: right必须显式声明，不能依赖继承 - 图片必须有明确的
width（推荐用固定值或max-width: 100%配合height: auto） - 避免只设
height不设width，否则容易拉伸变形
用 margin 控制图文间距，不是靠 padding
padding 是图片内部留白，对文字环绕无效；真正起作用的是图片自身的 margin，它定义了文字“绕行边界”的位置。
- 左浮动时，加
margin-right和margin-bottom，防止文字顶到右侧和下一段开头 - 右浮动时，加
margin-left和margin-bottom，避免文字紧贴左边框 - 不要只设一个方向的 margin，
margin: 0 15px 10px 0比单独写margin-right更可控
必须清除浮动，否则后续段落会错位
浮动元素脱离文档流，如果不干预，下一个 <p></p> 或 <h3></h3> 可能从图片底部右侧开始，而不是另起一行。
- 最简方式：在需要“结束环绕”的元素前加
<div style="clear: both"></div> - 更稳妥方式：给图文共用的父容器加
overflow: hidden或display: flow-root（后者兼容性稍差但语义更准） - 别用
float套float来“抵消”，比如给父容器也设float: left，这会把整个区域拖出正常流，引发连锁错位
小屏幕下记得关掉 float
在手机上强行维持浮动，常导致文字行宽过窄、首行缩进错乱，甚至图片被截断。
- 用媒体查询在
max-width: 768px下重置：img { float: none; width: 100%; margin: 0 auto; display: block; } - 不要只写
float: none就完事——得补上display: block和居中逻辑，否则图片可能变成行内对齐、左右空出空白 - 如果图文容器本身是栅格列（如
.box { width: 33.3% }），清除浮动后要同步调整该容器的width为100%，否则窄屏下仍会错位
最容易被忽略的是：浮动生效的前提是图片必须出现在文字内容之前。如果 HTML 里先写 <p></p> 再写 <img>，哪怕 CSS 写了 float: left，文字也不会环绕——它根本没机会“绕”过去。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
