双列布局下首div设float:right时左列位置偏高的布局原理疑问

我设置了两个宽度为50%的DIV，第一个DIV设置float: right;，但实际渲染时左列在视口中的位置更高，效果如下图：

代码如下：

<body>
    <div id="right" style="float: right; width: 50%;">
        <h1>Right H1 margin to div</h1>
    </div>
    <div id="left" style="width: 50%;">
        <h1>Left H1 margin to html/initial containing block</h1>
    </div>
</body>

按默认的包含块判定规则，两个DIV的position都是默认的static，包含块都应该是父级BODY才对，但左列的外边距却延伸到了视口，而非DIV或BODY的边界。
我知道给第二个div设置float:left就能让左右两列顶部对齐，但我不理解背后的外边距计算逻辑。我通过Chrome开发者工具查看了外边距，整理了两张截图：第一张是两个H1元素的CSS盒模型示意图：

第二张是五个元素（两个H1、两个DIV、BODY）的顶部外边距对比，灰色线为视口顶部边界：

实际渲染中，HTML结构里靠前的右侧H1元素的外边距是相对于BODY内容盒顶部计算的，而靠后的左侧H1元素的外边距却延伸到了视口顶部，看起来是和BODY的外边距发生了折叠甚至超出了BODY边界。希望能结合规范文档解释该行为的原理。

行为原理解释 #

这个渲染结果完全符合CSS 2.1规范的两条核心规则：

• 块格式化上下文（BFC）的隔离特性：规范明确规定，浮动元素会自动创建独立的BFC，BFC内部的元素布局和外部完全隔离，内部的外边距不会和BFC外部的任何元素发生折叠。你代码里右侧的#right设置了float:right，本身成为BFC，它内部h1的上外边距只会作用在#right的内容盒顶部，不会向外穿透，所以是相对于BODY的内容盒计算边距。
• 普通流块级元素的外边距折叠规则：如果普通流的块级元素没有触发BFC，同时没有边框、内边距、内联内容隔开父子元素的边距，那么子元素的上下外边距会直接和父元素的对应外边距合并，也就是常说的“外边距穿透”。你的左侧#left是普通流块级元素，没有触发BFC，所以它内部h1的上外边距会和#left的上外边距、BODY的上外边距连续折叠，最终合并后的边距直接作用到BODY外层，看起来就像左列的边距延伸到了视口顶部。

如果给#left也设置float:left，#left也会创建BFC，内部h1的边距就会被隔离在#left内部，不会向外折叠，两侧的边距计算逻辑一致，自然就顶部对齐了。

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