考虑以下两个代码片段，如何计算html高度？
1在Chrome中，html的高度为20px。
body {
margin: 8px;
}
div {
margin: 10px;
display: flow-root;
}<html>
<body>
<div>
</div>
</body>
</html>我的第一个想法是，这是因为将div放入块格式化上下文(BFC(会抑制其边距折叠(因此div的总垂直边距为20px(。
2然而，如果是这样的话，我不知道如何解释为什么html的高度是19px：
body {
margin: 8px;
height: 1px;
}
div {
margin: 10px;
display: flow-root;
}<html>
<body>
<div>
</div>
</body>
</html>对于第一种正确的情况，div的边距将与所有正文边距(顶部和底部(一起折叠，并且只保留20px，它将定义html 的最终高度
对于第二种情况，正文的高度将禁用底部边距折叠，因此在结尾处，您将有顶部边距10px(8px和10px之间折叠的结果(，然后div的底部边距不会与正文的底部边距一起折叠，但会溢出，因为您定义了显式高度(这是棘手的部分(，因此底部将考虑8px的边距，并将定义html的高度给出了CCD_ 9的总数。换句话说，这就像没有定义div的下边距一样。