设置position:absolute时内部p标签上方出现空白的原因是什么？

运行对应示例代码可观察到特殊表现：为.innerbg类设置position: absolute属性时，其内部的<p>标签上方存在多余空白间距；但移除.innerbg的position: absolute属性后，<p>标签与视口顶部的多余顶部间距会消失。
对应示例代码如下：

<html>
    <head>
        <style>
            body{
                margin: 0px;
            }
            .outer{
                width: 500px;
                height: 300px;
                position: relative;
            }
            .innerbg{
                position: absolute;
                background-size: cover;
                width: 100%;
                height: 100%;
                top: 0px;
                left: 0px;
            }
        </style>
    </head>
    <body>
        <div class="outer">
            <div class="innerbg">
            <p>Some content</p>
            </div>
        </div>
    </body>
</html>

该现象是CSS外边距折叠规则和绝对定位元素的BFC特性共同作用的结果：

• 浏览器默认样式表会给<p>标签设置默认上下外边距，以Chrome为例，默认上下外边距为1em，这是很多前端开发者初期容易忽略的默认样式。
• 当.innerbg未设置position: absolute时，它属于普通文档流中的块级元素，会触发外边距折叠机制：内部<p>的顶部外边距不会被限制在父元素范围内，而是会“穿透”父元素边界，和上层.outer、甚至body元素的外边距合并，最终这个间距不会出现在<p>和.innerbg顶部之间，而是作用在更外层的元素上，因此看不到容器内部的顶部空白。
• 当.innerbg设置position: absolute后，元素会脱离普通文档流，自动生成独立的块格式化上下文（BFC）。BFC的核心规则之一就是：内部子元素的外边距不会穿透容器边界，也不会和容器外部元素发生折叠。此时<p>自带的顶部外边距会被完全限制在.innerbg容器内部，直接作用在<p>顶部和容器顶部内容边界之间，最终就表现为观察到的p标签上方多余空白。

可以通过简单操作验证这个逻辑：不给.innerbg加绝对定位，仅添加overflow: hidden属性（该属性同样会触发元素生成BFC），一样能看到p标签上方出现相同的空白。

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