如何实现文本环绕右上角固定盒子且文本支持滚动？

问题根源有两点：一是浮动工具盒在文本容器外部，容器设置overflow-y: scroll后会形成独立块级格式化上下文（BFC），内部内容无法与外部浮动元素产生环绕效果；二是浮动元素属于文档流范畴，无法实现“固定角落不随文本滚动”的需求。

调整方案如下：

1. 将工具盒移入文本容器内部，通过绝对定位固定在容器右上角
2. 给文本容器添加右侧内边距，避免内容被工具盒遮挡
3. 保留文本容器的高度限制与纵向滚动属性

修改后的代码 #

CSS

.box {
  width: 100px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
}

#blue {
  background-color: blue;
}

#text {
  height: 120px;
  overflow-y: scroll;
  position: relative;
  padding-right: 110px; /* 预留右侧空间，避免文本被工具盒遮挡 */
}

HTML

<div id='text'>
  <div id='blue' class='box'></div>
  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. 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.
</div>

效果说明 #

• 蓝色工具盒固定在文本容器的右上角，不会随文本滚动
• 文本内容在容器内可纵向滚动，右侧预留的空间保证内容不会被工具盒遮挡，视觉上形成环绕效果

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