Float Div 在 CSS 中无法按预期工作

Question

这是我第一次使用 Stack Overflow，我来这里寻找答案，因为我已经寻找了一些解决方案，但没有解决方案可以解决我的确切问题。

基本上，我试图将两个元素（特别是

<div>

元素）浮动到左侧，将宽度设置为 60% 和 40% 以匹配网站的 100% 宽度。

但是同样的问题总是会发生，40%

<div>¬ just go below the 60% 

`。我不知道是我做错了什么还是其他什么。

这是我的代码：

/* General Styles Preset */

* {
  box-sizing: border-box;
  margin: 0;
}


/* Boxes and containers styles */

div.boxcontainer {
  overflow: hidden;
  width: 100%;
}

.boxone {
  float: left;
  width: 60%;
  height: 300px;
  margin: 10px;
  background-color: aquamarine;
}

.boxtwo {
  float: left;
  width: 40%;
  height: 300px;
  margin: 10px;
  background-color: cadetblue;
}

<div class="container">
  <div class="boxone"></div>
  <div class="boxtwo"></div>
</div>

---

代码应该做的是将两个 div 从左到右放置，两者的比例都是 60/40，以填充容器的 100% 宽度。此外，代码在 div 的 4 条边上放置了 10px 的边距，以在页面边框之间和 div 之间保持空间。

但事实证明，每次我尝试使上述情况发生时，“blocktwo”div 都会放置在“blockone”div 下方，正如当前 HTML 流程所预期的那样，因为两者都是块。但在这种情况下，即使我浮动它们并以百分比设置边距和大小，也会发生同样的事情。

我尝试过的：

1. 不设置边距，但这并没有给我想要的结果。
2. 使用边距作为百分比加起来为 100%，但这只会在边框和框之间产生不均匀的空间。
3. 在 Youtube、AI (ChatGPT) 和现在的 Stack Overflow 上寻找一些答案，但我还没有找到解决方案。

：

我希望两个块并排放置，比例正确，并且有边距，我的意思是，它们之间有空格。

现在，我知道有更简单有效的方法可以做到这一点，例如 CSS Flexbox 或 CSS Grid，但出于我正在学习的课程的目的，我希望能够解决我遇到的这个问题。我希望我能够很好地解释问题、结果和一切。谢谢！

Answer 1

正如您所注意到的，网格布局使这变得非常简单。但如果你决定使用浮动，这就是老的“鱼与熊掌兼得”的情况。 40% + 60% = 100%，因此您不能在其中添加任何边距。您只需更改这些宽度即可。你可以做这样的事情：

/* General Styles Preset */

* {
  box-sizing: border-box;
  margin: 0;
}


/* Boxes and containers styles */

div.boxcontainer {
  overflow: hidden;
  width: 100%;
}

.boxone {
  float: left;
  width: calc(60% - 20px);
  height: 300px;
  margin: 10px;
  background-color: aquamarine;
}

.boxtwo {
  float: left;
  width: calc(40% - 20px);
  height: 300px;
  margin: 10px;
  background-color: cadetblue;
}

<div class="container">
  <div class="boxone"></div>
  <div class="boxtwo"></div>
</div>