要让文字只绕图片上半部分，需用clear: both清除浮动并重置流，配合margin-bottom控制绕行高度，或用shape-outside+clip-path实现非对称环绕，同时确保html顺序正确且父容器建立bfc。
文字只绕图片上半部分，得靠 clear: both + 重置流
默认情况下，float 会让所有后续段落都参与环绕，直到遇到 clear。如果只想让第一段文字绕图片上半部，第二段从图片下方完整开始，就必须在第一段后主动“切断”环绕流。
常见错误是给第二段加 clear: both —— 这会让整段强制换行，文字从新行左端开始，但图片还在原位，视觉上变成“图在左、文在下”，不是你想要的“只绕上半部”。真正有效的做法是插入一个清除浮动的空元素，或用伪元素收束前一段的环绕范围：
- 在第一段
<p></p>后加<div style="clear: both; height: 0; overflow: hidden;"></div>（高度为 0 避免额外空白） - 或者更干净：给第一段文字容器加类
.wrap-first，再写.wrap-first::after { content: ""; display: table; clear: both; } - 别忘了父容器仍需防塌陷——用
overflow: hidden或display: flow-root包住整个图文块，否则清除操作可能失效
右浮动图片时，文字从左侧绕但不绕到底部？用 margin-bottom 控制“绕行高度”
float: right 本身不会限制环绕范围，但浏览器计算行盒时，会把图片的 margin-bottom 当作“可绕区域”的下边界。只要设好这个值，就能让文字只绕到图片底部以上的位置。
例如图片高 200px，你想只让文字绕到 140px 高度处，就设 margin-bottom: 60px。这样后续段落会在图片下方留出 60px 空白，自然从那里开始排布，视觉上就是“只绕上半部分”。
-
margin-bottom必须加在<img>上，不是文字容器 - 数值不能为 0，否则下一段会顶到图片底边，失去“截断”效果
- 响应式场景下，这个值最好用
em或rem，避免固定像素在小屏下失衡
想让文字绕图片左半边、右半边分开处理？别硬撑 float，改用 shape-outside + clip-path
纯 float 只能按矩形区域排挤行盒，无法实现“只绕左边、右边不绕”这种非对称控制。这时候必须升级方案：shape-outside 配合 clip-path 才能切出局部环绕区域。
比如只希望文字绕图片左侧 60% 宽度的部分，可以这样写：
.left-half-wrap {
float: left;
shape-outside: polygon(0 0, 60% 0, 60% 100%, 0 100%);
clip-path: polygon(0 0, 60% 0, 60% 100%, 0 100%);
}
-
shape-outside定义文字绕行的轮廓，clip-path裁剪图片显示区域，两者坐标必须一致 - 该方案要求图片必须有明确宽高，且父容器不能触发 BFC 失效（如
overflow: hidden会截断 shape 区域） - 兼容性注意：IE 完全不支持，Safari 15.4+、Chrome 102+、Firefox 110+ 可用；旧环境 fallback 回
float: left即可
最常被忽略的限制点：HTML 顺序和父容器 BFC
无论用哪种方式限制环绕范围，两个底层条件一旦出错，所有样式都会失效：
-
<img>标签必须出现在文字内容之前——浏览器只对浮动元素之后的文本流做环绕计算，顺序反了就完全不绕 - 图文必须共用同一个父容器，且该容器要建立 BFC（用
overflow: hidden或display: flow-root），否则浮动脱离文档流后，文字会“掉出”容器边界，看似没绕，其实是布局崩了 - 别在父容器上同时用
transform和float——transform会意外创建新层叠上下文，干扰shape-outside的路径计算
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
