如何让两列布局元素环绕设置float属性的元素？

希望实现两列各占50%宽度的文本/元素环绕一个设置了float属性的元素，但使用flex、grid或inline-block布局时，两列会完全避开float元素，直接排布在其下方。相关代码示例如下：

原代码示例 #

CSS代码 #

#container {
  /* border: 1px solid black; */
  width: 500px;
  height: 300px;
  /* display: flex; */
}

#left {
  margin-right: 10px;
  border: 1px solid black;
  width: 50%;
}

#right {
  width: 40%;
  border: 1px solid black;
}

:root {
  --page-width: 700px;
  --page-height: 100px;
  --top-margin: 10px;
  --left-margin: 10px;
  --bottom-margin: 10px;
  --right-margin: 10px;
}

.soup-image {
  display: block;
  width: calc(var(--page-width) - var(--left-margin) - var(--right-margin));
  height: calc(var(--page-height) + 20px);
  position: relative;
  float: right;
  margin-left: 100%;
  shape-outside: polygon(0 0, 100% 0, 100% var(--top-margin), 0 var(--top-margin), 0 calc(100% - 1 * var(--bottom-margin) - 20px), 100% calc(100% - 1 * var(--bottom-margin) - 20px), 100% 100%, 0% 100%);
  background: linear-gradient(white var(--top-margin), transparent var(--top-margin), transparent calc(100% - 1 * var(--bottom-margin) - 20px), white calc(100% - 1 * var(--bottom-margin) - 20px));
  pointer-events: none;
}

HTML代码 #

<div class="soup-image"></div>
<div id="container">
  <div id="left">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </div>
  <div id="right">
    Why do we use it? The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable
  </div>
</div>

flex、grid布局本身是块级容器，会脱离float的文本流，无法实现环绕效果。想要让两列环绕float元素，需要用传统浮动布局构建两列，同时调整shape-outside参数适配布局，具体修改如下：

修改后的代码 #

CSS代码 #

#container {
  width: 500px;
  /* 移除flex相关设置，让容器处于正常文本流 */
}

#left {
  float: left; /* 给左列设置浮动 */
  margin-right: 10px;
  border: 1px solid black;
  width: calc(50% - 5px); /* 调整宽度，抵消列间margin */
  margin-bottom: 10px; /* 增加底部margin避免元素重叠 */
}

#right {
  float: left; /* 给右列设置浮动 */
  border: 1px solid black;
  width: calc(50% - 5px); /* 调整宽度，抵消列间margin */
}

/* 清除浮动，避免容器高度塌陷 */
#container::after {
  content: "";
  display: block;
  clear: both;
}

:root {
  --page-width: 500px; /* 改为和容器一致的宽度 */
  --page-height: 100px;
  --top-margin: 10px;
  --left-margin: 10px;
  --bottom-margin: 10px;
  --right-margin: 10px;
}

.soup-image {
  display: block;
  width: calc(var(--page-width) - var(--left-margin) - var(--right-margin));
  height: calc(var(--page-height) + 20px);
  position: relative;
  float: right;
  /* 移除margin-left:100%，避免元素被推到容器外 */
  shape-outside: polygon(0 0, 100% 0, 100% var(--top-margin), 0 var(--top-margin), 0 calc(100% - var(--bottom-margin) - 20px), 100% calc(100% - var(--bottom-margin) - 20px), 100% 100%, 0% 100%);
  background: linear-gradient(white var(--top-margin), transparent var(--top-margin), transparent calc(100% - var(--bottom-margin) - 20px), white calc(100% - var(--bottom-margin) - 20px));
  pointer-events: none;
  margin-bottom: 10px;
}

HTML代码（无需修改） #

<div class="soup-image"></div>
<div id="container">
  <div id="left">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
  </div>
  <div id="right">
    Why do we use it? The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable
  </div>
</div>

关键修改点说明 #

• 移除容器的flex/grid布局，让容器回到正常文本流，使内部元素能响应外部的float元素。
• 给左右两列设置float: left，并调整宽度为calc(50% - 5px)，抵消列间margin，保证总宽度适配容器。
• 移除.soup-image的margin-left: 100%，避免浮动元素被推到容器外部，无法被内部元素环绕。
• 给容器添加清除浮动的伪元素，防止容器高度塌陷。

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