左右浮动大于包装div？ [复制]

Question

我正在尝试在我的电子邮件模板中创建一个彩色列部分。我遇到的问题是包含所有电子邮件内容的内容包装器是按照下面的代码设置的。同样，浮动列 CSS 也包括在内。

#content {
  background-color: white;
  margin: auto;
  width: 600px;
  color: #888;
  font-size: 12px;
  border-radius: .6em .6em 0em 0em;
  box-shadow: 0px 0px 15px 0px #555;
}
.blueLeft {
  background-color: #33ccff;
  float: left;
  display: block;
  width: 300px;
  padding: 20px;
  font-size: 16px;
}
.blueRight {
  background-color: #33ccff;
  float: right;
  display: block;
  width: 300px;
  padding: 20px;
  font-size: 16px;
}
<div id="content">
   <div class="blueLeft">
      <p>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p> 
   </div>
   <div class="blueRight">
      <p>
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </p> 
   </div><div class="clearFloat"></div>
</div>

如您所见，内容包装器有一个width: 600px;，每列都是300px。您会期望这些列将填充 100% 的包装器宽度，中间没有空格。将宽度设为 50% 也是同样的问题。所以不知何故，#content 显示的比它应该的要小。

如何编辑它以使每列真正占据内容宽度的 50%？

结果是这样的：

Answer 1

这是因为你有宽度和内边距。

如果您将box-sizing: border-box; 添加到.blueLeft 和.blueRight，它应该可以解决您的宽度问题。

如需详细了解其原因和方式，请访问MDN documentation on the CSS Box Model。