CSS中浮动Div未按预期工作问题求助

问题出在总宽度超出容器：你给两个div分别设了60%和40%宽度，再加上每个div左右各10px的margin，总宽度算下来是 60% + 20px + 40% + 20px = 100% + 40px，直接超过了容器的100%宽度，所以第二个div被挤到下方。

用Float实现的核心是让两个div的宽度+自身margin的总和刚好等于容器宽度，这里可以用CSS的calc()函数直接计算实际宽度（注意box-sizing: border-box只处理border和padding，不包含margin，所以margin得单独扣减），修改后的代码如下：

修改后的CSS代码 #

/* General Styles Preset */
* {
  box-sizing: border-box;
  margin: 0;
}

/* Boxes and containers styles */
div.container {
  overflow: hidden;
  width: 100%;
}
.boxone {
  float: left;
  width: calc(60% - 20px); /* 60%宽度减去左右各10px的margin */
  height: 300px;
  margin: 10px;
  background-color: aquamarine;
}
.boxtwo {
  float: left;
  width: calc(40% - 20px); /* 40%宽度减去左右各10px的margin */
  height: 300px;
  margin: 10px;
  background-color: cadetblue;
}

对应的HTML代码 #

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

如果只想要两个div之间有10px间距、容器左右无margin，可以调整margin设置进一步优化：

.boxone {
  float: left;
  width: calc(60% - 10px);
  height: 300px;
  margin: 10px 10px 10px 0; /* 仅右侧留10px间距 */
  background-color: aquamarine;
}
.boxtwo {
  float: left;
  width: calc(40% - 10px);
  height: 300px;
  margin: 10px 0 10px 10px; /* 仅左侧留10px间距 */
  background-color: cadetblue;
}

这样总宽度就是 (60%-10px) + 10px + (40%-10px) = 100%，刚好填满容器，同时两个div间保持10px间距，上下也有10px的margin。

内容的提问来源于stack exchange，提问作者hrrgauss