文本无法环绕图片容器求助：当前仅显示两列而非环绕效果

你的问题出在使用了inline-flex布局——flex容器会强制子元素采用弹性盒模型排列，这会让float属性完全失效，所以无法实现文本环绕效果。

修正步骤： #

• 移除.main-box和.sub的display: inline-flex，让容器回到正常的块级文本流中
• 将span.img-box改为div.img-box（行内元素span虽然可以float，但div更符合块级容器的语义）
• 保留.img-box的float: right，它会自动让周围文本环绕排列

修改后的代码： #

CSS

.main-box {
  border: solid green;
  overflow: auto;
}

.sub {
  overflow: auto;
}

.img-box {
  border: solid green;
  float: right;
  width: 400px;
  /* 可选：添加margin让文本和盒子间有间距 */
  margin-left: 1rem;
}

HTML

<div class="main-box">
  <div class="sub">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent
    <div class="img-box">
      THIS IS TEXT (此处可替换为<img>标签)
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet.
  </div>
</div>

原理：当元素设置float: right后，它会脱离正常文本流并靠右排列，周围的文本会自动环绕在它左侧，这是CSS实现文本环绕的原生方式，前提是容器不能是flex/grid这类会改变文本流的布局。

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