用float:left实现图片左浮文字右绕，需图片html在文字前、不加display:block或margin:auto、父容器未截断高度；否则图片会沉底而非左浮。
直接用 float: left 就行，但必须满足三个前提：图片在 HTML 中写在文字前面、不加 display: block 或 margin: auto、父容器没意外截断高度。
为什么图片总跑到文字下面而不是左边？
这不是浏览器 bug，而是浮动生效条件没凑齐。常见破坏条件包括：
- 图片写在
<p></p>标签之后——HTML 顺序决定环绕起点，文字得“看到”浮动元素才能绕过去 - 给图片加了
display: block——<img>默认是行内替换元素，加了 block 就彻底脱离行盒，文字无法参与环绕 - 父容器用了
height: 200px这类固定高度——如果图片+文字总高度超了，多余内容会被裁掉或下沉 - 图片加了
margin: auto——这会让它居中并放弃浮动锚点，float直接失效
float: left 配什么 margin 才不挤文字？
只设 float: left 很容易让文字紧贴图片右边缘，甚至卡在图片底部。关键靠两个 margin：
-
margin-right：控制文字与图片右侧的水平间距，常用12px～20px -
margin-bottom：防止下一段文字顶到图片底部，尤其当图片比当前段落高时 - 别乱设
margin-left或margin-top——左浮动本身已贴左，顶部对齐由行高决定
示例：
img { float: left; width: 150px; margin-right: 15px; margin-bottom: 10px; }
父容器塌陷或后续内容错位怎么办？
浮动会让父容器“看不见”子元素高度，导致背景色消失、边框包不住内容，或者下一个 <h3></h3> 跑到图片右边去。解决方式有两种：
- 在父容器上加
overflow: hidden（简单粗暴，兼容性好） - 在浮动元素后加一个清除元素：
<div style="clear: both"></div> - 避免用
clear: both在文字容器（如<p></p>）上——它会强制换行，破坏环绕
真正容易被忽略的是响应式场景：小屏下 float 会让文字换行异常，比如一行只容下 2 个字就折行。这时候不如用 display: flex 替代，但若必须支持 IE8–IE11，float 仍是唯一可靠选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
