如何解决博客文章图片重叠问题，实现文章高度自适应

核心思路 #

要让文章高度由文本和图片的最大高度决定，关键是确保图片不脱离文档流，同时让容器能正确计算内部元素的高度。以下是具体调整方案：

1. 修正图片定位方式 #

如果图片使用了position: absolute或fixed，会脱离文档流导致容器无法感知其高度，进而引发重叠。将图片定位改为默认的static或relative：

.md-post__content img.cover {
  position: relative; /* 替换absolute/fixed */
  float: none; /* 若之前有浮动则清除 */
}

2. 让容器正确包裹内容 #

给文章内容容器添加BFC（块级格式化上下文），确保容器高度能包含所有内部元素：

.md-post__content {
  overflow: hidden; /* 触发BFC，自动包裹内部元素 */
  min-height: 100%; /* 确保容器至少占满可用空间 */
}

3. 清除浮动（若存在浮动布局） #

如果图片采用浮动布局，需清除浮动避免内容重叠：

.md-post__content::after {
  content: "";
  display: table;
  clear: both;
}

4. 可选：保持图片比例并限制宽度 #

为避免图片超出容器宽度，同时维持宽高比，可添加：

.md-post__content img.cover {
  max-width: 100%;
  height: auto; /* 自动按比例调整高度 */
}

效果验证 #

调整完成后，每个.md-post容器的高度会自动取文本高度与图片高度的较大值，图片和文本将不再重叠。

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