float是唯一兼容IE8+的图文环绕方案，文字从下一行开始是因浮动只影响行内内容换行，块级元素需同父容器、图片前置、加margin-right/ left及clear或BFC清除塌陷。
float 是当前唯一能直接、稳定实现图文环绕的 CSS 方案，不需要 JS、不依赖现代布局容器，IE8 起全兼容。其他方案要么无效，要么必须配合 float 才能生效。
为什么 float:left 后文字还是从下一行开始？
这不是 CSS 写错了，而是浏览器在按规范执行：浮动只影响后续**行内内容**的换行位置，对紧跟着的块级元素（比如另一个 <p></p>）完全无效。
-
<img alt="CSS如何快速实现图文环绕效果_利用float属性控制图片位置" >必须写在文字内容的前面——HTML 顺序决定环绕起点，调换顺序就失效 - 图片和文字必须在同一个父容器里，比如都包在
<div class="article"> 内 <li>别给 <code><img alt="CSS如何快速实现图文环绕效果_利用float属性控制图片位置" >加display: block或margin: auto，这会让它脱离行内流，失去环绕基础 - 父容器如果没设
overflow: hidden或display: flow-root，高度会塌陷，导致后续段落“顶上来”，看起来像文字掉到了图下面 - 左浮动图片：必须加
margin-right（推荐12px–1rem），控制右侧文字距离 - 右浮动图片：必须加
margin-left，不是margin-right - 一定要加
margin-bottom（如8px），否则下一段<p></p>会顶到图片底部，中间出现大片空白 - 避免用
margin: 10px这类简写——上下 margin 会意外把相邻段落“顶开” - 图片需设
height: auto，否则缩放后比例错乱，浮动区域计算偏移 - 最稳妥：
overflow: hidden或overflow: auto（IE8+ 兼容） - 更现代：
display: flow-root（Chrome 64+/Firefox 58+），语义清晰且不影响子项 - 伪元素清除（兼容老版本）：
.container::after { content: ""; display: table; clear: both; }——漏掉content: ""或display: table都无效 - 别把
clear: both直接加在文字<p></p>上，它会强制整段换行，环绕就断了 - 在
@media (max-width: 768px)中建议直接关掉浮动：float: none; display: block; margin: 0 auto; - 同步移除
shape-outside和clear，否则可能触发渲染异常 - 如果父容器还挂着
overflow: hidden，窄屏下可能意外裁剪图片或文字 - 图片用了
max-width: 100%却没配height: auto，小屏下会被压扁，导致浮动区域高度计算错误
左右浮动 + margin 的正确配法
margin 不是可选装饰，而是控制可读性的关键参数。加错方向或漏掉某一项，文字就会贴得太近、错位、或段落之间留白异常。
浮动后父容器塌陷，怎么稳住布局？
浮动让图片脱离文档流，父容器若没高度约束，就只剩一条线高，后续内容全从顶部重排。清除方式选错，反而破坏环绕。
立即学习“前端免费学习笔记（深入）”；
响应式下浮动突然失效，该检查什么？
小屏时硬撑 float 容易让文字挤成窄列，而且媒体查询里漏掉一条样式，整个图文关系就断了。真正容易被忽略的是：浮动不是为响应式设计的，它是排版遗留机制。
真正复杂的地方不在 float 本身，而在于它和文档流、父容器、媒体查询之间的连锁反应。一个没设 margin-bottom，下一段文字就顶上来；一处忘了清除塌陷，整块图文就错位；小屏时漏掉 float: none，用户滑动时文字会突然跳行。这些细节不靠调试很难发现，但每一条都直接影响最终呈现。
