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

Question

我不明白为什么以及如何解决红色块转到下一行的事实。 Ofc 我可以使用 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>

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

Why when i use float, last item going on next line?

html

css

css-float