根据子元素中的更改增加或减小父div高度

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="clear"></div>
</div>

<style>
.parent {
  overflow: hidden;
}

.child {
  float: left;
}

.clear {
  clear: both;
}
</style>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

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

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>

<script>
const parent = document.querySelector('.parent');
const children = document.querySelectorAll('.child');

function updateParentHeight() {
  let maxHeight = 0;
  children.forEach(child => {
    maxHeight = Math.max(maxHeight, child.offsetHeight);
  });
  parent.style.height = maxHeight + 'px';
}

// 监听子元素变化事件，例如添加、删除、内容改变等
children.forEach(child => {
  child.addEventListener('change', updateParentHeight);
});

// 初始化时计算一次父div的高度
updateParentHeight();
</script>