盒模型、BFC 与外边距合并

两种盒模型

每个元素都是一个矩形盒子，由 content、padding、border、margin 组成。区别在于 width 包含什么：

• 标准盒模型（content-box）：width 只包含内容区
• 怪异盒模型（border-box）：width = 内容 + padding + border

.box {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
  border: 5px solid #333;
}
/* 内容区实际只有 150px，盒子总宽仍是 200px */

布局时 border-box 更好用——设好宽度后再调 padding 不会把布局撑乱，建议全局设置：

*, *::before, *::after { box-sizing: border-box; }

外边距合并

块级元素的上下 margin 会发生合并，取较大值而不是相加。更坑的是"穿透"：

<div class="parent">
  <div class="child" style="margin-top: 30px"></div>
</div>

父元素没有 border、padding、BFC 等阻隔时，子元素的 margin-top 会穿透到父元素外面。

BFC：块级格式化上下文

BFC 是一个独立的渲染区域，内部元素不会影响外面。触发条件常见的有：

• overflow 不为 visible（如 hidden、auto）
• display: flow-root（专门用来触发 BFC，无副作用）
• 浮动、绝对定位、display: inline-block

BFC 的三个经典用途：

1. 阻止 margin 穿透：给父元素触发 BFC
2. 清除浮动：BFC 区域会包含内部浮动元素，父元素高度不再塌陷
3. 阻止文字环绕浮动元素：BFC 区域不与浮动盒子重叠，也可用来做自适应两栏布局

.parent { overflow: hidden; /* 现代浏览器推荐 display: flow-root */ }

记住：margin 合并只发生在垂直方向，flex、grid 容器里不会合并。