我发现，如果我们设定一个块级元素有height:auto或height:0~100%没有成立家长与明确价值高，它的块级的孩子有底部边缘，那么它会在不同的浏览器计算的高度，但不能在Firefox。对于设置的情况height: 1%：

html {

  background: pink;

}



body {

  background: yellow;

}



div {

  height: 1%;

}



inner {

  margin-bottom: 30px;

  margin-top: 20px;

}


<div>

  <p class="inner">block level element</p>

</div>

div块的高度将计算为margin-bottom + content height of p element。我对 为什么height:1%应该计算auto``html``body``auto感到困惑 ， 因为父元素（ 和
标签）没有显式设置其高度，而是具有不同的高度，因为我们直接将高度设置为 ？

如果我们直接将其设置为height: auto，它将显然只是将高度设置为其子块级元素的高度，这不包括其底边距。

html {

  background: pink;

}



body {

  background: yellow;

}



div {

  height: auto;

}



inner {

  margin-bottom: 30px;

  margin-top: 20px;

}


<div><p class="inner">block level element</p></div>

我已经阅读了CSS 2.1规范，并考虑了我的问题可能涉及到height属性和margin崩溃主题，但是仍然无法理解为什么它在Chrome
ver中的行为有所不同。47.0.2526，尽管Firefox版本为。44.0.2将显示相同的高度。

• 10.5：百分比

…如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为“自动”。…

• 10.6.3：overflow计算为时，正常流程中的块级不可替换元素visible。

…如果’height’为’auto’，则高度取决于元素是否具有任何块级子元素以及其是否具有填充或边框：

元素的高度是从其顶部内容边缘到以下 第一个适用 边缘的距离：

1. 如果最后一个行框的底部边缘建立了一个或多个行的内联格式设置上下文
2. 如果最后一个流入子项的底边距的底边（可能是塌陷）的底边，如果子项的底边距不随元素的底边距而塌陷
3. 最后一个流入子项的底边界边缘，该子项的顶边距不随元素的底边距折叠
4. 零，否则

• 8.3.1利润下降。

如果元素没有顶部边框，没有顶部填充且子元素没有间隙，则流入块元素的顶部边缘将以其第一个流入块级子元素的顶部边缘折叠。

如果框没有底部填充且没有，则“高度”为“自动”且“最小高度”为零的流入块盒的底部边距以其最后一个流入块级子级的底部边距折叠底边框和孩子的底边距不会因具有间隙的顶边距而折叠。

…如果框的顶部和底部边距相邻，则边缘可能会塌陷。在这种情况下，元素的位置取决于其与其边距被折叠的其他元素的关系。

 * 如果元素的边距与父级的上边距折叠在一起，则框的顶部边框边缘将定义为与父级的相同。
 * 否则，要么元素的父级不参与边距崩溃，要么仅涉及父级的底边距。元素的顶部边框边缘的位置与元素的底部边框非零时的位置相同。