使用浮动float、清除浮动clear、overflow，将【样例】从左图，改成右图样式，其中，边框宽度为5px

为了将一个元素从左图的堆叠布局改为右图的流式布局，并保持边框宽度为5px，我们需要使用CSS的一些基本属性：

**原始布局示例（左图）**：

<div class="left-image">
  <div class="content">内容</div>
</div>

.left-image {
  border: 5px solid black; /* 边框宽度 */
}

.content {
  float: left; /* 左侧浮动 */
}

**目标布局示例（右图）**：

<div class="right-image">
  <div class="content">内容</div>
</div>

.right-image {
  border: 5px solid black;
  overflow: auto; /* 清除溢出内容，保持高度适应 */
}

.content {
  clear: both; /* 确保内容不再浮动并下移 */
  width: 100%; /* 流式布局，宽度自适应 */
  box-sizing: border-box; /* 包含边框宽度 */
}

在这个例子中，我们通过设置`.right-image`的`overflow`属性为`auto`来防止内容溢出容器，同时使用`.content`的`clear`属性为`both`来消除浮动影响。如果内容超过 `.right-image` 的宽度，它会自动换行显示。为了让内容保持在边框内，我们还添加了 `box-sizing: border-box`。

**相关问题--:**
1. 为什么要设置`overflow: auto`？
2. 为什么`.content`需要清除浮动？
3. `box-sizing: border-box`的作用是什么？