为什么当我使用float时，最后一项在下一行上进行？

Question

我不明白为什么以及如何解决红色块将进入下一行的事实。我可以在第二个和第三个块中使用margin-left: 5%进行修复，但这是不对的。那么，如何将所有三个块分布在一行中，并使其总宽度的边距等于100％？]

.clearfix::after {
  content: " "; 
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.common-block {
  background-color: wheat;
  width: 800px;
  height: 400px;
  padding-top:20px;
}

.items {
  background-color: white;
  max-width: 600px;
  padding:20px;
  margin:auto;
  overflow: auto;
}

.item {
  float: left;
  width: 30%;
  margin-left: 5%;
  border-bottom: 1px solid black;
  height: 50px;
}

.item-1 {
  background-color: yellow;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: red;
}

<div class="common-block">
  <div class="items">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
  </div>
</div>

Answer 1

3 *（30％+ 5％）等于105％（=大于100％），这就是原因。将保证金值更改为3％即可使用（3 *（30％+ 3％）= 99％）。

.clearfix::after {
  content: " "; 
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.common-block {
  background-color: wheat;
  width: 800px;
  height: 400px;
  padding-top:20px;
}

.items {
  background-color: white;
  max-width: 600px;
  padding:20px;
  margin:auto;
  overflow: auto;
}

.item {
  float: left;
  width: 30%;
  margin-left: 3%;
  border-bottom: 1px solid black;
  height: 50px;
}

.item-1 {
  background-color: yellow;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: red;
}

<div class="common-block">
  <div class="items">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
  </div>
</div>

作为替代方案，您可以仅将左边距应用于第二和第三块，并将其保留为5％。这也将使块在其容器内居中：

.clearfix::after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.common-block {
  background-color: wheat;
  width: 800px;
  height: 400px;
  padding-top: 20px;
}

.items {
  background-color: white;
  max-width: 600px;
  padding: 20px;
  margin: auto;
  overflow: auto;
}

.item {
  float: left;
  width: 30%;
  border-bottom: 1px solid black;
  height: 50px;
}

.item-1 {
  background-color: yellow;
}

.item-2 {
  background-color: green;
}

.item-3 {
  background-color: red;
}

.item-2,
.item-3 {
  margin-left: 5%;
}

<div class="common-block">
  <div class="items">
    <div class="item item-1"></div>
    <div class="item item-2"></div>
    <div class="item item-3"></div>
  </div>
</div>