关于 BFC 的几个 HTML 渲染区别答案

【问题标题】：Several HTML render distinctions about BFC关于 BFC 的几个 HTML 渲染区别
【发布时间】：2021-11-05 09:33:49
【问题描述】：

这里是三个html css代码


    <div class="out">
      <div class="in">
      </div>
    </div>
    <style>
    .out {
      background: red；
    }
    .in {
        margin: 10px
    }

结果：超出 0px 高度


    <div class="out">
        <div class="in">
        </div>
    </div>
    <style>
    .out {
        background: red;
        display: flow-root;
    }
    .in {
        margin: 10px
    }
    </style>

结果：超出 10px 高度


    <div class="out">
        <div class="in">
        </div>
    </div>
    <style>
    .out {
        background: red;
        display: flow-root;
    }
    .in {
        margin: 10px
        display: flow-root;
    }
    </style>

结果：超出 20px 高度

问题是为什么第二个（只有BFC）是10px高度。它只包含'inner'类的margin-top，为什么margin-bottom exclude？我认为 'out' 是一个 bfc，所以它的孩子应该完全包含在其中，包括边距顶部和底部。

【问题讨论】：

标签： html css

【解决方案1】：

如果 'min-height' 属性为零，并且它既没有顶部或底部边框，也没有顶部或底部填充，并且它的 'height' 为 0，则框自身的边距折叠或'auto'，并且它不包含行框，并且其所有流入子级的边距（如果有）折叠。 ^ref

这适用于您的第二种情况，使.out 内的总边距仅等于10px，因此高度为10px

通过将flow-root 添加到.in，您可以创建一个 BFC 并禁用该边距折叠

【讨论】：