如何确保文本内容的边框不延伸至图片下方或超出图片范围？

先梳理你现有代码的几个问题： #

• HTML结构不合法：<p>标签内不能嵌套<div>这类块级元素，浏览器会自动拆分标签，直接打乱布局逻辑。
• 用了过时的align="left"属性，这种旧属性早就该被CSS布局替代了。
• 样式写错：margin-right: 2px没放在style属性里，background-color: d18924缺少#前缀，浏览器根本识别不了这个颜色值。

给你两种可行的解决方案： #

方案1：用浮动+BFC（适合传统布局场景）

修正后的HTML：

<div class="content-wrapper">
  <img src="index-foto1.jpg" style="border-radius: 10px; width: 65%; float: left; margin-right: 10px;">
  <div class="tant">
    <h3>Более подробно о Вышнем Волочке можно узнать по данным ссылкам:</h3>
  </div>
  <div class="clear-float"></div>
</div>

对应的CSS：

.tant {
  border: solid;
  background-color: #d18924;
  overflow: hidden; /* 触发BFC，让容器边界不延伸到浮动图片下方 */
}

.clear-float {
  clear: both; /* 清除浮动，避免父容器高度塌陷 */
}

.content-wrapper {
  margin: 1em 0; /* 可选：给整体加个上下间距 */
}

关键说明：

• 把原来的<p>换成<div class="content-wrapper">，解决块级元素嵌套的问题。
• 用float: left替代align="left"，并把margin-right移到style里生效。
• .tant加overflow: hidden会触发BFC，让容器自动适配自身内容高度，不会和浮动的图片重叠，边框自然就不会延伸到图片下方了。

方案2：用Flex布局（现代布局方案，更简洁）

这是更推荐的方式，完全不用处理浮动的坑：
修正后的HTML：

<div class="flex-content">
  <img src="index-foto1.jpg" style="border-radius: 10px; width: 65%;">
  <div class="tant">
    <h3>Более подробно о Вышнем Волочке можно узнать по данным ссылкам:</h3>
  </div>
</div>

对应的CSS：

.flex-content {
  display: flex;
  align-items: flex-start; /* 让图片和文本顶部对齐，避免文本容器被拉伸 */
  gap: 10px; /* 控制图片和文本的间距，替代margin-right */
  margin: 1em 0;
}

.tant {
  border: solid;
  background-color: #d18924;
  flex: 1; /* 让文本容器占据剩余空间 */
}

关键说明：

• Flex布局天生是为这种横向排列场景设计的，父容器设display: flex后，子元素自动横向排列。
• align-items: flex-start确保文本容器不会被图片的高度拉伸，边框只会包裹自身的文本内容。
• flex: 1让文本容器自动填充图片之外的剩余空间，布局更灵活。

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