如何解决HTML中带边框文本区域内容环绕图片的问题？

下面提供三种实用的解决方案，根据你的浏览器兼容需求选择即可：

方法1：使用Flexbox布局（推荐） #

Flexbox是现代网页布局的首选方案，能轻松实现元素并排，且自动控制内部元素的排列逻辑，彻底避免文本溢出到图片下方的问题。

<div class="container">
  <img src="your-image.jpg" alt="图片描述" class="side-image">
  <div class="text-box">
    <p>这里是你的文本内容，现在会稳定显示在图片右侧，不会延伸到图片下方。</p>
    <p>即使添加多段文本，整个文本区域也会保持在图片右侧的空间内，不会换行穿透。</p>
  </div>
</div>

<style>
.container {
  display: flex;
  gap: 20px; /* 图片与文本框之间的间距，可按需调整 */
  align-items: flex-start; /* 让图片和文本框顶部对齐，避免垂直居中导致的布局偏移 */
}

.side-image {
  width: 200px; /* 根据需求设置图片宽度 */
  height: auto; /* 保持图片比例 */
}

.text-box {
  border: 1px solid #ccc; /* 你的文本框边框样式 */
  padding: 15px; /* 文本内边距，提升可读性 */
  flex: 1; /* 让文本框自动填充容器剩余的可用空间 */
}
</style>

方法2：使用Float + 清除浮动（兼容旧浏览器） #

如果需要兼容IE等旧版本浏览器，可以采用浮动布局，但要注意通过BFC（块级格式化上下文）和清除浮动来避免布局混乱。

<div class="container">
  <img src="your-image.jpg" alt="图片描述" class="side-image">
  <div class="text-box">
    <p>通过浮动让图片靠左排列，文本框会自动占据右侧空间，不会让文本跑到图片下方。</p>
    <p>多段文本也能被文本框完整包裹，保持布局整齐。</p>
  </div>
  <div class="clearfix"></div> <!-- 清除浮动，防止容器高度塌陷影响下方元素 -->
</div>

<style>
.side-image {
  float: left;
  width: 200px;
  height: auto;
  margin-right: 20px; /* 图片与文本的间距 */
}

.text-box {
  border: 1px solid #ccc;
  padding: 15px;
  overflow: hidden; /* 触发BFC，让文本框包裹自身内容，不被浮动元素穿透 */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>

方法3：使用Grid布局 #

Grid布局适合更复杂的排版场景，能精确控制列宽和元素位置，同样可以解决你的问题。

<div class="container">
  <img src="your-image.jpg" alt="图片描述" class="side-image">
  <div class="text-box">
    <p>Grid布局可以精准定义列的宽度分配，让图片和文本框稳定并排。</p>
  </div>
</div>

<style>
.container {
  display: grid;
  grid-template-columns: auto 1fr; /* 第一列自适应图片宽度，第二列占据剩余所有空间 */
  gap: 20px;
  align-items: start;
}

.side-image {
  width: 200px;
  height: auto;
}

.text-box {
  border: 1px solid #ccc;
  padding: 15px;
}
</style>

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