如何用CSS实现文本在上侧环绕元素而非下侧？

要实现文本在元素上方环绕（而非默认的侧边/下方环绕），可以通过CSS浮动结合shape-outside属性，或者浮动+上边距的方式实现，以下是具体可行的方法：

方法1：浮动 + shape-outside（推荐） #

shape-outside能自定义文本环绕的区域，配合浮动可以精准让文本只填充元素上方的空间，即使容器高度不固定也能生效：

代码示例 #

<p class="text-wrap-container">
  这里是需要环绕的文本内容，篇幅足够长才能看到明显的环绕效果。这里是需要环绕的文本内容，篇幅足够长才能看到明显的环绕效果。这里是需要环绕的文本内容，篇幅足够长才能看到明显的环绕效果。这里是需要环绕的文本内容，篇幅足够长才能看到明显的环绕效果。这里是需要环绕的文本内容，篇幅足够长才能看到明显的环绕效果。
  <img src="你的图片路径" alt="被环绕的元素" class="bottom-element">
</p>

.text-wrap-container {
  width: 400px; /* 你设置的固定宽度 */
}

.bottom-element {
  float: left; /* 可改为right，调整元素在底部的左右位置 */
  width: 120px;
  height: 120px;
  margin-right: 10px; /* 文本与元素的间距 */
  /* 核心：让文本只在元素上方区域环绕 */
  shape-outside: inset(calc(100% - 120px) 0 0 0);
}

inset(calc(100% - 120px) 0 0 0)的作用是：从容器顶部向内缩进「容器总高度 - 元素高度」的距离，这样文本就只会填充元素上方的空间，自然形成上侧环绕的效果。

方法2：浮动 + 大上边距（适合固定高度容器） #

如果你的容器高度是固定值，可以通过给元素设置足够大的margin-top，让它下沉到容器底部，同时利用浮动让文本填充上方空间：

.text-wrap-container {
  width: 400px;
  height: 300px; /* 固定容器高度 */
}

.bottom-element {
  float: left;
  width: 120px;
  height: 120px;
  margin-right: 10px;
  /* 计算上边距：容器高度 - 元素高度 */
  margin-top: 180px;
}

为什么固定div在底部无效？ #

直接用position: absolute; bottom: 0把元素固定在底部，会让元素脱离文档流，文本不会感知到它的存在，因此无法形成环绕效果。而浮动元素始终在文档流内，文本会自动围绕它排列，这是两种方案的核心区别。

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