边框如何导致边距折叠？

Question

请看以下示例：

.wrapper {
  width: 740px;
  background: #ccc;
}
.leftSidebar {
  float: left;
  width: 200px;
}
.mainContent {
  padding-right: 200px;
  padding-left: 200px;
}

<div class="wrapper">
  <div class="leftSidebar">
    <h2>Heading</h2>
    <pre>.leftSidebar {
  float:left;
  width:200px;
}</pre>
  </div>
  <div class="mainContent">
    <h2>Heading</h2>
    <pre>.mainContent {
  padding-right:200px;
  padding-left:200px;
}</pre>
  </div>
</div>

.wrapper {
  width: 740px;
  background: #ccc;
}
.leftSidebar {
  float: left;
  width: 200px;
}
.mainContent {
  padding-right: 200px;
  padding-left: 200px;
  border: 1px solid rgba(0, 0, 0, 0);
}

<div class="wrapper">
  <div class="leftSidebar">
    <h2>Heading</h2>
    <pre>.leftSidebar {
  float:left;
  width:200px;
}</pre>
  </div>
  <div class="mainContent">
    <h2>Heading</h2>
    <pre>.mainContent {
  padding-right:200px;
  padding-left:200px;
  border: 1px solid rgba(0, 0, 0, 0);
}</pre>
  </div>
</div>

正如您在上面看到的，mainContent 的透明边框显着改变了布局。

这是我对正在发生的事情的想法：由于某些原因，mainContent 上应用的border: 1px solid rgba(0, 0, 0, 0); 导致浮动leftSidebar 的边距与mainContent 的边距一起折叠，就像display: inline-block 一样应用在mainContent 上就可以了。

但是，我不知道细节。 relevant part of CSS 2.1 对我来说太难理解了。谁能告诉我为什么以及如何确切发生崩溃？

Answer 1

边框不会导致.mainContent 的边距与.leftSidebar 的边距折叠。它防止其后代的边缘与自身（因此与.wrapper）折叠。这就是为什么.mainContent > h2 的上边距现在与.leftSidebar > h2 的上边距对齐的原因——.leftSidebar 的后代边距同样没有与自身或.wrapper 折叠的原因是因为它是浮动的。

.mainContent 和 .leftSidebar 是并排的，所以它们的后代边距不可能被认为是相邻的，因此它们的后代边距不可能相互折叠。