盒模型、BFC、外边距折叠怎么解释
先理解原理和示例，再练习完整口述与追问。
回答要点
说明 content-box 与 border-box 的尺寸计算；理解 BFC 与浮动、布局隔离的关系。不要只背触发方式，要能用具体布局解释问题；overflow 方案还可能带来裁切或滚动副作用。
原理拆解
标准盒模型中 width 通常只约束内容区，border-box 则把 padding 与 border 算进指定尺寸。BFC 是一种独立的块级格式化上下文，可影响浮动避让、包含浮动以及与外界的外边距折叠关系。相邻正常流块的竖直 margin 可能折叠，正 margin 常取较大值；负值参与时需按规则计算，不是统一相加。
示例与推演
.card { width: 300px; padding: 20px; border: 1px solid; box-sizing: border-box; }
.float-wrapper { display: flow-root; }
card 的边框盒宽度仍为 300px，内容宽为 258px。flow-root 可让容器形成 BFC，以包含内部浮动，通常比为了清浮动随意加 overflow:hidden 更明确。
易错点
BFC 不等于层叠上下文，也不保证所有子元素 margin 都不折叠。overflow:hidden 可能意外裁切弹层；Flex/Grid 子项的布局规则也不能完全按普通块流套用。
参考回答可直接练习口述
content-box 的 width/height 主要表示内容区域，外部还加 padding 与 border；border-box 的尺寸包含内容、padding、border，但不包含 margin。BFC 是一种独立块格式化环境，会影响浮动包含和布局关系；flow-root 是创建这类环境的明确方法。相邻普通块的垂直 margin 可能折叠，父子也有特定折叠条件。给父容器建立合适 BFC 可以隔离部分父子折叠，但不代表内部任意兄弟 margin 都不再折叠。