Question

为什么column2和column3之间的水平空间仅为5%而非10% = 5% + 5%？

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

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

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

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

.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

问题是由课程float: none;中的.bfc造成的，要解决它，只需将其注释掉，例如：

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

margin中存在视觉差异的原因是，当您使用float删除none属性时，Floated元素仍然是网页流的一部分（就像您一样）为你的最后一栏做了），它得到static代替它。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

fly

.column {
  width: 20%;
  background-color: green;
  display:inline-block;
  margin: 0 5%;
  text-align:center;
}

/* Establishing a new block formatting 
   context in the last column */
.bfc {
  
  overflow: hidden; 
}

你应该使用“display：inline-block”而不是float left.Then它可以正常工作。问题是bfc的float：none属性。它将从前一个元素的末尾开始占用左边距。

Answer 3

您只需从CSS中删除.bfc类。实际上没有必要。它会导致风格问题。

水平边距和块格式上下文

3 个答案: