绝对定位元素无法被文本环绕，因其脱离文档流；浮动与绝对定位不可共存于同一元素，浏览器会忽略float；可行方案是浮动占位元素触发环绕，relative父容器+absolute子元素实现精确定位。
绝对定位元素本身无法被文本环绕，这是 CSS 规范决定的——它已完全脱离文档流。所谓“组合实现复杂环绕”，本质是用浮动元素占位、absolute 元素叠加，二者分属不同层级，不能混在同一元素上。
为什么不能给同一个元素同时设 float 和 position: absolute
浏览器会直接忽略 float 值，强制计算为 none。这不是兼容性问题，而是规范行为。你写成：
.box { float: left; position: absolute; top: 10px; left: 10px; }
结果就是：它既不参与文本环绕，也不受父容器浮动影响，只按包含块定位。视觉上可能“看起来像”在浮动区里，但逻辑上已与浮动无关。
真正可行的组合方式：浮动占位 + relative 父容器 + absolute 子元素
想让文字绕着一个区域走，同时在该区域内精确放图标、角标或提示框，得靠三层结构：
立即学习“前端免费学习笔记（深入）”；
- 外层容器（如
<div class="wrap">）不设定位，仅用于语义和样式隔离 <li>中间占位元素（如 <code><div class="placeholder">）设 <code>float: left+ 显式宽高，它才是真正触发文本环绕的主体 - 内层装饰元素（如
<div class="badge">）放在占位元素内部，且其父级（即 <code>.placeholder）必须设position: relative，才能让position: absolute相对于它定位这样，文字环绕的是
.placeholder，而.badge只是“贴”在它上面，互不干扰。容易被忽略的关键细节
这些点不处理，布局大概率错乱：
-
.placeholder必须有明确的width和height，否则浮动后高度塌陷，文字会从下方穿过 - 若
.placeholder是唯一浮动子元素，其父容器需触发 BFC（比如加overflow: hidden），否则父容器高度为 0 -
z-index只对定位元素生效，浮动元素默认z-index: auto，如果.badge被文字盖住，不是位置错了，是层级没提上去 - 响应式场景下，
float占位宽度需配合媒体查询重设，而absolute的top/right值往往也要调，不能一劳永逸
真正的复杂环绕，从来不是靠一个属性搞定的；它是文档流控制（float）、定位上下文（relative）、视觉层叠（absolute + z-index）三者协同的结果。少其中任何一环，就只剩“看起来差不多”。
-
