html - 带有垂直边距的 float div 和标题错误对齐

Question

我有以下标记:

<div class="twocol float-left">
    <h4>left</h4>
    <p>first</p>
    <p>second</p>
    <p>third</p>
</div>

<div class="twocol">
    <h4>right</h4>
    <p>foo</p>
    <p>bar</p>
    <p>foobar</p>
</div>​

CSS:

.twocol {
    margin-right: 1em;
}

.float-left {
    float: left;
}

h4 {
    margin: 1em 0;
    font-weight: bold;
}

DEMO

问题

标题的垂直位置应该相等，但“右”比“左”高 1 em。为什么？以及如何解决这个问题？

Answer 1

这里的问题是由于边缘崩溃。默认情况下， body 上有一些边距。当两个边距相遇时，浏览器选择两者中较大的一个并应用它。当您 float 一列时，这会破坏折叠边距，并且两个边距都会被应用。

我在您的 fiddle 中添加了一些背景色来说明这一点。 http://jsfiddle.net/Hu5ZH/2/

要了解有关折叠边距的更多信息: http://www.w3.org/TR/CSS2/box.html#collapsing-margins