css - 水平边距和 block 格式化上下文

Question

为什么 column2 和 column3 之间的水平间距只有 5% 而不是 10% = 5% + 5%?

column1 和 column2 之间的水平边距符合预期 10%。

column3是一个 BFC。这就是 column2 和 column3 magins 崩溃的原因吗？

我不是在尝试布局。我只是好奇它是如何以及为什么发生的。

由于 float:none 属性，第 3 列 的左边距消失了。为什么？

.column {
  width: 20%;
  background-color: green;
  float: left;
  margin: 0 5%;
  text-align:center;
}

/* Establishing a new block formatting 
   context in the last column */
.bfc {
  float: none;
  overflow: hidden; 
  margin-left:20%; /*This property added later.Where does this margin go?*/
}

<div class="container">
  <div class="column">column 1</div>
  <div class="column">column 2</div>
  <div class="column bfc">column 3</div>
</div>

Answer 1

问题是.bfc类中的float: none;引起的，注释掉即可解决，示例:

.bfc {
    /*float: none;*/
}

您在 margin 中有视觉差异的原因是，当您使用 删除 float 属性时， float 元素仍然是网页流的一部分>none(正如您在上一列中所做的那样)，它得到 static 来代替它的定位。

    .column {
      width: 20%;
      background-color: green;
      float: left;
      margin: 0 5%;
      text-align:center;
    }

    /* Establishing a new block formatting 
       context in the last column */
    .bfc {
      /*float: none;*/
      overflow: hidden; 
    }

    <div class="container">
      <div class="column">column 1</div>
      <div class="column">column 2</div>
      <div class="column bfc">column 3</div>
    </div>