CSS布局中图片div高度被忽略 后续元素垂直定位异常如何解决

问题根因 #

这是典型的文档流高度塌陷问题，核心原因是包含图片的div没有被内部元素撑开高度，导致后续元素直接向上偏移，常见触发场景如下：

• 图片设置了float属性，浮动元素脱离正常文档流，父容器未设置高度也没有做清除浮动处理，高度直接坍缩为0
• 包含图片的div被设置了position: absolute/position: fixed，脱离文档流后不占据页面高度空间
• 图片默认是行内块级元素，底部存在默认留白，父容器高度计算时可能出现异常

修复方案 #

1. 修复图片容器高度塌陷

优先给图片父容器添加清除浮动规则，避免内部浮动元素导致高度坍缩，你可以直接给父容器添加overflow: hidden触发BFC，也可以用通用的伪元素清除浮动方案：

/* 给包含图片的div添加clear-fix类名即可 */
.clear-fix::after {
  content: '';
  display: block;
  clear: both;
}

同时给图片添加display: block属性，消除行内块默认的底部留白：

.img-container img {
  width: 100%;
  display: block;
}

2. 优化按钮垂直居中方案

你之前使用的居中方案大概率用到了绝对定位，操作不当很容易出现元素脱离文档流、定位参照错误的问题，更稳妥的方案是使用Flex布局实现居中，不会影响正常文档流：

/* 给最后一个包含文本和按钮的div添加该样式 */
.btn-container {
  display: flex;
  align-items: center; /* 内部元素垂直居中 */
  justify-content: space-between; /* 文本居左、按钮居右分布 */
}

如果必须使用定位实现居中，需要给按钮的父容器添加position: relative，确保按钮的定位参照父容器计算，不会出现整体偏移的问题。

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