负外边距留白：图片设负top/left后如何实现文本环绕布局？

这确实是个常见的布局痛点——当你用负top/left让图片“溢出”容器时，普通的float只会让文本环绕图片原本的布局盒子，不会识别视觉上溢出的部分。不过我们可以用CSS Shapes来完美解决这个问题，它就是专门为非矩形文本环绕场景设计的。

具体实现方案 #

我给你写个可直接复用的示例：

HTML结构

<div class="content-box">
  <img src="your-image-url.jpg" class="pulled-image" alt="示例图片">
  <p>这里替换成你的正文文本... 可以多写几行测试效果，比如：Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

CSS样式

.content-box {
  border: 2px solid green;
  padding: 20px;
  position: relative;
  overflow: hidden; /* 可选：防止图片溢出页面，根据需求调整 */
}

.pulled-image {
  float: left;
  /* 用负定位让图片向左向上溢出 */
  position: relative;
  top: -50px;
  left: -50px;
  /* 核心：用shape-outside定义文本应该环绕的区域 */
  /* inset(顶部偏移 右侧偏移 底部偏移 左侧偏移)，这里对应图片的负偏移量 */
  shape-outside: inset(50px 0 0 50px);
  /* 可选：调整文本和图片之间的间距 */
  shape-margin: 8px;
}

原理说明 #

shape-outside: inset(50px 0 0 50px)的作用是告诉浏览器：文本应该环绕的区域是图片盒子向内缩进50px顶部、50px左侧后的区域。这样文本就会自动填充图片向左向上溢出的空白部分，实现你想要的视觉效果。

额外提示 #

1. 如果你的图片是不规则形状，还可以用shape-outside: polygon()或者shape-outside: url(your-image-url)来匹配图片的轮廓，不过矩形偏移场景下inset就足够了。
2. 也可以用负margin代替position: relative的偏移（比如margin: -50px 15px 15px -50px），记得同步调整shape-outside的inset值就行。
3. CSS Shapes在现代浏览器中都支持，兼容性不用担心，除非你需要适配非常老旧的IE版本。

内容的提问来源于stack exchange，提问作者user7432810