父div设置height:0时子div未撑开父元素且仍可见的原因是什么

为什么子元素没有撑开父元素高度 #

你给类名为container的父元素显式设置了固定值height: 0px，而块级元素只有当height属性值为默认的auto时，才会自动根据内部内容的高度计算自身高度。只要你给父元素写死了固定高度值，不管内部子元素尺寸多大，父元素都会严格遵循你设定的高度值，不会被子元素撑开。
如果需要父元素高度自适应内容，不要设置固定的height属性，或者使用min-height替代固定height即可。

为什么父元素高度为0时子元素仍然可见 #

这是overflow属性的默认规则导致的：所有元素的overflow属性默认值为visible，意思是当子元素的尺寸超出父元素的盒模型范围时，超出的部分不会被裁剪，会直接显示在父元素之外的区域。
如果你给.container添加overflow: hidden属性，父元素就会裁剪掉所有超出自身范围的内容，此时你设置的高度为0的父容器就会把所有子元素都剪掉，页面上就看不到子元素了。

示例CSS代码

.container {
  background: blue;
  height: 0px;
  width: 100%;
}

.block {
  background: gold;
  height: 100px;
  width: 100px;
}

示例HTML代码

<div class="container">
  <div class="block">
    block
  </div>
</div>

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