为什么顶部边距正在崩溃，而底部边距却没有？

debugcn 发表于 Dev

纳尔索克

如在下面的演示中所见，在中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有关，但我不确定。有人可以帮我想一想吗？

一个儿子

与“ clearfix”一起使用display: table将保留底边距，display: block不会。

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

更新：为什么最高利润率崩溃是因为没有在其直接父项上建立BFC

为了使页边距不崩溃，请在示例中通过添加例如来在父级上添加BFC（在这种情况下）。poverflow: auto

阅读更多：掌握利润率下降

更新：为什么<table>'的边距不会与相邻的边一起崩溃<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。