如何在固定高度文本div右下角放置按钮并实现文字环绕？

要实现这个效果，核心思路是利用float让按钮保留在文档流中（确保文本能环绕），再通过计算型外边距将按钮定位到div右下角。直接用绝对定位会让按钮脱离文档流，文本无法环绕；单纯float:right只会让按钮停在右上角，因此需要结合margin-top调整垂直位置。

代码示例 #

<div class="text-box">
  <button class="corner-btn">确认操作</button>
  <!-- 填充你的文本内容 -->
  <p>这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容，这里是需要环绕按钮的文本内容。</p>
</div>

.text-box {
  height: 300px; /* 固定高度 */
  border: 1px solid #ddd;
  padding: 10px;
  overflow: auto; /* 文本超出时显示滚动条 */
}

.corner-btn {
  float: right;
  margin-left: 10px; /* 文本与按钮的间距 */
  margin-top: calc(100% - 42px); /* 用div高度减去按钮自身高度，让按钮贴到底部 */
  height: 40px; /* 明确按钮高度，保证calc计算准确 */
  border: none;
  background: #007bff;
  color: #fff;
  padding: 0 18px;
  border-radius: 4px;
}

关键注意点 #

1. 按钮必须放在文本之前，才能让文本从左侧和上方环绕按钮
2. calc(100% - 42px)中的42px是按钮高度+上下边框/内边距的总和，需和按钮实际高度匹配
3. 如果div设置了上下padding，计算时要把padding值也减去，比如div上下padding各10px，公式应为calc(100% - 42px - 20px)
4. 即便文本长度不足填满div，按钮依然会固定在右下角位置

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