为什么顶部利润率正在崩溃但是利润率不高？

Question

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

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

我想这与保证金崩溃和建立新的BFC有关，但我不确定。有人可以帮我清楚吗？

Answer 1

使用＆＃34; clearfix＆＃34;使用display: table将保留底部边距，display: block不会。

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

更新：为什么最高保证金崩溃是因为没有BFC在其直接父母上建立

要使边距不会崩溃，请在p父级添加BFC，例如下面的示例，添加例如overflow: auto。

更多内容阅读：Mastering margin collapsing

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;