前端 CSS 盒模型与格式化上下文

CSS 布局由一组相互影响的盒子规则构成。理解内容区、内边距、边框、外边距以及格式化上下文，可以解释尺寸计算、外边距塌陷和浮动清除等常见问题，也能减少依赖偶然效果的样式。

一、明确元素尺寸如何计算

默认盒模型中，width 和 height 描述内容区尺寸；内边距和边框会加在外部尺寸上。使用 border-box 后，声明尺寸包含内容、内边距和边框，更容易控制组件边界。

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

全局统一盒模型能让表单、卡片和网格列的尺寸更直观。若组件需要溢出内容，应明确设置 overflow 行为，而不是依赖内容偶然撑开布局。

二、理解块级和行内布局

普通文档流中，块级盒子通常沿块方向依次排列，行内内容在行盒中换行。行内盒的一些尺寸行为与块级盒不同，因此给行内元素声明宽高时，结果可能和预期不一致。需要可控尺寸时，应选择合适的 display 类型。

行盒高度由字体度量、行高和其中内容共同决定。混排图标和文本时，应检查基线、垂直对齐和行高，而不是用大量固定偏移补偿。

三、认识外边距塌陷

相邻块级盒子的垂直外边距可能合并；父子元素之间也可能发生塌陷。塌陷常让“父元素的间距为什么没有按预期相加”变得难以理解。

布局上下文、边框、内边距或使用 flex/grid 等方式可以改变相关规则。修复时应先明确需要的是父子间距、兄弟间距还是容器内留白，再选择合适的结构，不宜盲目加透明边框。

四、格式化上下文划分布局责任

格式化上下文决定一组盒子的布局规则和参与边界。建立独立布局上下文可以影响浮动、外边距和内部布局之间的关系，也能把组件内部的布局影响限制在局部。

.panel {
    display: flow-root;
}

flow-root 适合在不改变子元素布局模式的情况下建立新的块格式化上下文。flex 和 grid 也会形成自己的布局上下文，但应按真实布局需求选择。

五、定位和包含块

绝对定位元素相对最近的定位祖先或包含块布局。若组件内的弹层意外跟随整个页面定位，通常是缺少预期的定位祖先。固定定位还会受到变换等祖先属性影响。

建立定位关系时应把参照容器和层级职责写清楚。组件内部弹层需要逃离裁剪或层叠上下文时，应考虑统一的弹层挂载策略。

六、处理溢出和滚动

overflow 会影响内容裁剪、滚动容器和层叠行为。给元素设置 overflow 后，可能改变粘性定位或弹出内容的表现。需要滚动的容器应有明确尺寸约束，并在触屏和键盘环境下验证。

实践排查顺序

• 元素尺寸不符时，先确认 box-sizing，再分别检查内容宽高、内边距、边框和最小尺寸。开发工具显示的盒模型比凭肉眼猜测更可靠。
• 父元素高度没有包住子元素时，检查子元素是否脱离普通流或浮动，并确认容器是否需要建立新的格式化上下文。不要立即给父元素写固定高度。
• 外边距看似“合并”时，先找出发生塌陷的父子或兄弟关系，再用符合布局意图的内边距、边框或上下文修正。
• 绝对定位弹层跑到错误位置时，沿祖先检查定位包含块、变换和裁剪属性。弹层若要跨越组件边界，应使用统一挂载层处理。
• 出现横向滚动时，重点查长文本、网格最小轨道、图片固有尺寸和固定宽度。对需要收缩的内容设置正确的最小尺寸，而非全局隐藏溢出。

复核场景

实现卡片内的长文本和按钮时，先限定卡片最大尺寸，再让文本区域参与收缩，最后决定溢出是换行、截断还是滚动。若父级需要包住浮动内容，应使用能表达布局边界的方式，而不是手工猜高度。定位弹层时明确其参照容器和裁剪容器；这两者不一定是同一个节点。

场景取舍补充

布局问题尽量在负责该布局的容器内修复。全局 overflow、固定高度和负外边距可能暂时遮住症状，却会让其他页面在内容变化后出现裁剪。修复后用长内容和窄容器重新验证。

同一问题在弹窗、页面主体和窄屏卡片中可能由不同祖先规则引起，修复时应在实际使用场景复测，避免只在孤立组件中成立。

布局规则发生变化后检查相邻组件，因为建立格式化上下文或修改 overflow 可能改变外边距、定位和滚动关系，影响范围不一定止于当前节点。

七、逻辑属性适应内容方向

直接使用 left、right、margin-left 等物理方向属性，会让从右到左语言和垂直书写模式难以复用样式。inline-start、inline-end、block-start 和 block-end 按内容流向表达位置，适合组件库和多语言页面。

.article {
    margin-inline: auto;
    padding-block: 1rem;
    border-inline-start: 3px solid currentColor;
}

逻辑属性描述阅读方向中的起点和终点，不等于屏幕固定的左右上下。页面方向变化时，检查图标、箭头和动画方向是否也需要改变。

八、层叠上下文与定位层级

z-index 不是全页面统一排序。定位元素、透明度、变换等条件可能创建层叠上下文，内部数值再大也无法越过祖先上下文。弹层、菜单、提示和页面固定栏应有一致的层级设计，而不是各自使用极大的数值。

.dialog-layer {
    position: fixed;
    inset: 0;
    z-index: var(--layer-dialog);
}

变换祖先还可能改变固定定位元素的参照行为。排查层级问题时沿祖先检查上下文创建条件和裁剪范围，再决定是否把弹层挂载到统一容器。

九、滚动边界与内容尺寸

滚动容器必须有可计算的尺寸约束。flex 或 grid 子项默认最小尺寸有时会阻止内部区域滚动，需要在正确的轴上允许收缩。只在 body 上设置 overflow hidden 可能同时破坏页面滚动、焦点可见性和弹层定位。

十、从布局问题回到模型

复杂布局应先确定普通流、定位、弹性或网格关系，再写尺寸约束。若样式依赖多个负外边距、固定高度和极高层级才能成立，说明布局模型可能没有表达组件真实关系。

实施中的取舍与复核

盒模型问题经常来自默认尺寸计算方式和子元素最小尺寸。统一盒模型后，声明的宽度通常更接近最终占用宽度，但仍需确认边框、内边距和滚动条影响。Flex 和 Grid 子项默认最小尺寸可能阻止内容收缩，长单词、代码块或宽表格会把容器撑开；排查时应检查子项的最小宽度和内容溢出策略，而不是不断缩小父容器。

格式化上下文能隔离部分浮动、外边距折叠和布局影响，但建立新上下文会影响定位、裁剪和滚动。使用 overflow、display 或 contain 解决一个局部问题前，要确认阴影、焦点轮廓和弹层不会被截断。外边距折叠导致的空隙应通过理解父子格式上下文解决，盲目增加透明边框会掩盖结构原因。

尺寸策略应考虑内容增长。固定高度可用于确有边界的媒体容器，但正文、提示和用户输入往往会因语言、缩放或设备而变化，应优先使用最小高度、内容自适应和明确的溢出处理。缩放页面、放大系统文字、切换长文本和窄屏时检查布局，确认重要操作不会被裁切或遮挡。

定位布局时在开发工具查看元素的计算尺寸、盒模型和实际溢出祖先。问题可能由子项固有尺寸、字体加载、边框累计或滚动容器共同造成。建立小型复现场景后逐一改变约束，比添加多个覆盖规则可靠；修复后清理已无用途的尺寸规则，防止后续布局变更再次冲突。

总结

盒模型说明尺寸如何计算，格式化上下文划定布局规则边界，定位规则决定坐标参照，overflow 决定内容和滚动如何处理。掌握这些基础关系后，布局问题可以从规则本身分析，而不是靠不断叠加覆盖样式。