为什么标准CSS盒模型下添加margin会导致布局破损？

你混淆了「元素width属性的计算规则」和「浮动元素并排所需的总水平空间计算规则」两个概念，具体逻辑如下：

1. 你对标准盒模型的理解是正确的：标准模式下，CSS的width属性仅定义元素内容区的宽度，确实不包含padding、border、margin，所以你给.blog添加margin:20px之后，它的内容区宽度依然是600px，这部分认知没有问题。
2. 布局破损的核心原因：两个左浮动元素要在同一行显示，父容器的宽度需要大于等于两个元素的总水平占据宽度之和，而元素的总水平占据宽度 = 内容区宽度 + 左右padding + 左右border + 左右margin，margin是会增加元素在页面中占据的水平空间的。
3. 具体数值计算：
   • 无margin时，.article和.blog的总水平占据宽度都是600px，总和1200px刚好等于父容器宽度，所以可以并排。
   • 给.blog添加margin:20px后，它的左右margin各为20px，总水平占据宽度变为 600px + 20px*2 = 640px，两个元素总占据宽度为 600px + 640px = 1240px，超出父容器1200px的宽度限制，因此.blog会被挤到下一行，布局破损。

常见解决方案 #

• 调整.blog的宽度，抵消margin的占用：将.blog的width改为560px，总占据宽度变回560px + 20px*2 = 600px，总宽度刚好1200px
• 使用calc动态计算宽度：width: calc(50% - 40px)，适配响应式场景
• 改用Flex布局替代浮动，通过gap属性设置间距，无需手动计算宽度占用

.container {
  width: 1200px;
  display: flex;
}
.article {
  background-color: red;
  flex: 1;
}
.blog {
  background-color: blue;
  flex: 1;
  margin-left: 40px; /* 也可直接在container上设置gap:40px实现间距 */
}

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