为什么顶部边距正在折叠但底部边距没有？答案

【问题标题】：Why top margins are collapsing but bottom margins are not?为什么顶部边距正在折叠但底部边距没有？
【发布时间】：2017-02-17 06:19:30
【问题描述】：

正如您在下面的演示中看到的，在left-column 中，.clearfix-using_display-table（黄色部分）和.clearfix-using_display-table p（银色部分）的上填充边缘相互接触。但是，在下边缘，由于某种原因，两条边缘不相互接触。

事实上，right-column 的布局是我认为left-column 中的盒子应该是这样的。

.left-column,
.right-column {
  background-color: orange;
  width: 150px;
}
.left-column {
  float: left;
}
.right-column {
  float: right;
}
.clearfix-using_display-table,
.clearfix-using_display-block {
  background-color: yellow;
  width: 125px;
}
.clearfix-using_display-table p,
.clearfix-using_display-block p {
  background-color: silver;
  width: 100px;
  margin-top: 1em;
}
.clearfix-using_display-table:after,
.clearfix-using_display-block:after {
  content: " ";
  clear: both;
}
.clearfix-using_display-table:after {
  display: table;
}
.clearfix-using_display-block:after {
  display: block;
}

<div class="wrapper">
  <div class="left-column">
    <h3>Table</h3>
    <div class="clearfix-using_display-table">
      <p>Lorem Ipsum...</p>
      <p>Lorem Ipsum...</p>
    </div>
  </div>
  <div class="right-column">
    <h3>Block</h3>
    <div class="clearfix-using_display-block">
      <p>Lorem Ipsum...</p>
      <p>Lorem Ipsum...</p>
    </div>
  </div>
</div>

我猜这与保证金崩溃和新 BFC 的建立有关，但我不确定。有人能帮我想想办法吗？

【问题讨论】：

在基于display:table 的“clearfix”方法中，垂直边距不会折叠，display block 会折叠。来源：cssmojo.com/the-very-latest-clearfix-reloaded
@LGSon 我在某处读过。但是，如果垂直边距不塌陷，为什么灰色部分会碰到顶部边缘的橙色部分？
因为p 有一个底部边距，而不是顶部，这就是 2:nd 被向下推的原因
@LGSon 但是为p 添加margin-top: 1em; 并没有什么不同（我的问题中的代码已经更新）
对不起，我的部分错误，建立一个新的 BFC 遗嘱，例如将 overflow: auto; 添加到您的 .clearfix-using_display-table, .clearfix-using_display-block 规则中

标签： html css layout css-float clearfix

【解决方案1】：

在display: table 中使用“clearfix”将保留下边距，display: block 不会。

源：http://cssmojo.com/the-very-latest-clearfix-reloaded/

更新：为什么上边距崩溃是因为没有在其直接父级上建立 BFC

要使边距不折叠，请添加BFC，在本例中是在p 父级上，如下例所示，例如添加overflow: auto。

更多阅读：Mastering margin collapsing

更新：Why doesn't a <table>'s margin collapse with an adjacent <p>

.left-column,
.right-column {
  background-color: orange;
  width: 150px;
}
.left-column {
  float: left;
}
.right-column {
  float: right;
}
.clearfix-using_display-table,
.clearfix-using_display-block {
  background-color: yellow;
  width: 125px;
  overflow: auto;                      /*  establish BFC  */
}
.clearfix-using_display-table p,
.clearfix-using_display-block p {
  background-color: silver;
  width: 100px;
}
.clearfix-using_display-table:after,
.clearfix-using_display-block:after {
  content: " ";
  clear: both;
}
.clearfix-using_display-table:after {
  display: table;
}
.clearfix-using_display-block:after {
  display: block;
}

<div class="wrapper">
  <div class="left-column">
    <h3>Table</h3>
    <div class="clearfix-using_display-table">
      <p>Lorem Ipsum...</p>
      <p>Lorem Ipsum...</p>
    </div>
  </div>
  <div class="right-column">
    <h3>Block</h3>
    <div class="clearfix-using_display-block">
      <p>Lorem Ipsum...</p>
      <p>Lorem Ipsum...</p>
    </div>
  </div>
</div>

【讨论】：

感谢您的解释！但是，我的问题是为什么顶部边距正在折叠但底部边距不是 当没有 BFC...
@sunqingyao cssmojo.com/the-very-latest-clearfix-reloaded的链接解释说，在基于display:table的“clearfix”方法上，垂直边距不会塌陷，display block会塌陷。
是的，但似乎垂直边距不会在底部折叠，但出于某种原因，它们确实在顶部折叠。正如标题所暗示的那样，这个问题旨在关注为什么它们会在顶部崩溃。
@sunqingyao 两种方式的结合说明，由于没有 BFC，上边距塌陷，底部不在桌面上，而是在块上。还在我的答案中添加了一个新链接，这可能与此问题重复
就是这样！ Clearfix 是通过创建伪元素.clearfix:after 来实现的，所以只影响按钮边距是很合理的。