如何让父div.row高度自动适配最高子元素的高度？

嘿，这个问题其实挺常见的——你现在的.row高度塌陷，根本原因是子元素用了float，脱离了正常文档流，导致父容器没法感知到它们的高度，自然就没法自适应最高子元素的高度啦。给你两个超简便的解决办法，挑你喜欢的用就行：

方法一：用Flex布局重构（最推荐，代码改动极小） #

直接把.row改成flex容器，这是现代CSS里最省心的方案，不仅能让父容器自动适配最高子元素的高度，还能顺便让两列自动等高，完全不用再管浮动的事儿。

修改后的CSS代码如下：

.row {
  background: yellow;
  display: flex; /* 关键：给父容器添加flex布局 */
}
.column1 {
  width: 50%; /* 删掉原来的float: left */
}
.column2 {
  width: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: aqua;
}
img {
  width: 100%;
}

这样修改后，.row的高度会自动等于图片列的高度，同时.column2也会和图片列一样高，里面的内容还能保持你原来的flex居中效果，完美契合你的需求。

方法二：修复浮动导致的高度塌陷（不改动布局逻辑） #

如果你不想切换到flex布局，只想修复当前浮动布局的高度问题，可以给.row添加清除浮动的样式，让它能感知到浮动子元素的高度。

你可以选两种清除浮动的方式：

1. 简单快捷版（适合场景简单的情况）：

.row {
  background: yellow;
  overflow: hidden; /* 让父容器包裹浮动子元素 */
}

2. 通用稳健版（适合复杂布局，不会有副作用）：

.row {
  background: yellow;
}
/* 通过伪元素清除浮动 */
.row::after {
  content: "";
  display: table;
  clear: both;
}

这个方法能让.row的高度自适应图片列的高度，.column2也会被父容器的高度撑开，不过它只是修复了高度塌陷，不像flex那样原生支持列等高，但也能满足你的核心需求。

总体来说，更推荐第一种flex布局的方法，代码改动少，还能获得更灵活的布局能力。

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