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

Question

有人可以向我解释为什么向容器元素添加填充或边框会影响 float 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>

Answer 1

您看到的是“边缘崩溃”，当两个元素彼此重叠时会发生这种情况。它消失的原因是您将边框或轮廓添加到其中一个元素。来自 W3C:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.