CSS：为什么容器上的填充或边框会改变封闭浮动的行为？

有人能向我解释为什么在容器元素中添加padding或border会影响浮动div的显示方式吗

示例1和4显示了我期望的结果。样本2和样本3不适用

这真让我抓狂

它在Webkit和FireFox中的行为都很奇怪。没有测试过IE

<div style="">
    <div style="border: 1px solid green; float: right;">This float is correct</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 1</h3>
    <p>Parent has nothing</p>
</div>

<div style="padding: 1px;">
    <div style="border: 1px solid green; float: right;">This float is incorrect</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 2</h3>
    <p>Parent has padding</p>
</div>

<div style="border: 1px solid red;">
    <div style="border: 1px solid green; float: right;">This float is incorrect</div>
    <h3 style="margin: 20px 0px; border: 1px solid blue;">Sample 3</h3>
    <p>Parent has border</p>
</div>

<div style="padding: 1px;">
    <div style="border: 1px solid green; float: right;">This float is correct</div>
    <h3 style="margin: 0px 0px; border: 1px solid blue;">Sample 4</h3>
    <p>Parent has padding, H3 has no margin</p>
</div>

这个浮动是正确的
样本1
父母一无所有

这个浮动不正确
样本2
父项具有填充

这个浮动不正确
样本3
父对象有边界

这个浮动是正确的
样本4
父级有填充，H3没有边距

我认为实际上2、3和4的渲染应该是这样的，1看起来有点奇怪

• 1标题的上边距在清楚设置时被忽略。这有点奇怪，因为第一个例子中的p是关于h3的边距的。将

  overflow:hidden

  添加到封装div中似乎可以对其进行排序，从而使其尊重h3的边距
• 2和3尊重h3的裕度
• 4您删除了边距槽样式

  ---

你所看到的是当两个元素相互重叠时发生的“边际崩溃”。它消失的原因是向其中一个元素添加边框或轮廓。来自W3C：

在本规范中，表达式折叠边距意味着 相邻页边距（无非空内容、填充或边框区域，或 两个或多个箱子（可能在旁边）的间隙 一个或另一个（嵌套）组合形成一个单独的页边距

---

在示例1中，上边距不会被忽略。按页边距大小从页面顶部向下推。唯一移动的是浮动div。不，如果你在firefox或chrome中检查示例1周围的div，你会看到它没有像它应该做的那样进行包装，在所有其他情况下它都正确地进行包装。我刚刚听到确认，它在IE8中也这样做。为什么这三个渲染引擎都一致？