CSS 布局是前端绕不开的一块，但它的知识结构有点特别：新方案并没有淘汰旧方案，而是层层叠加。你今天写 Flex，仍然要懂常规流才知道为什么某个元素撑不开高度；你用 Grid 做页面骨架，组件内部大概率还是 Flex。
这个专题按「先理解机制，再选工具」的顺序组织。我自己的经验是，布局出问题时，八成不是因为不会用某个属性，而是因为不清楚浏览器在这个位置到底按什么规则排版。
学习路径
第一阶段：搞清楚盒子是怎么算出来的。 先看宽度与高度的计算规则，弄明白 width: 100% 到底相对谁、为什么给父元素设百分比高度经常不生效。这部分不搞清楚，后面用什么布局方案都会时不时撞墙。
第二阶段：理解两个隐形机制。 BFC（块格式化上下文）和层叠上下文，是 CSS 里最典型的「你看不见它，但它一直在起作用」的东西。外边距为什么会合并、浮动元素为什么撑不起父容器、z-index 设到 9999 为什么还是压不住别人——答案都在这两个机制里。
第三阶段：掌握两套主力方案。 Flex 和 Grid。这一步的重点不是背属性表，而是建立「什么场景该用哪个」的判断。
第四阶段：处理真实设备。 响应式适配、移动端的 1px 边框、安全区域这些工程问题。
四种布局方案怎么选
| 方案 | 维度 | 最适合 | 主要问题 |
|---|---|---|---|
| 常规流 | — | 文档型内容、纯文字页面 | 无法控制横向排列 |
| float + clear | 伪二维 | 文字环绕图片 | 需要清除浮动，父容器高度塌陷 |
| position | 脱离文档流 | 弹窗、吸顶、角标 | 不参与排版，容易和其他元素打架 |
| Flex | 一维 | 组件内部排列、导航、居中 | 二维网格要嵌套多层才能实现 |
| Grid | 二维 | 页面骨架、卡片网格 | 组件内部的简单排列属于杀鸡用牛刀 |
判断方法其实很简单：你要同时控制行和列吗？ 要，用 Grid；不要，用 Flex。至于 float 和 position，今天基本只在各自的专门场景里出现——float 用于文字环绕，position 用于脱离文档流的浮层。
常见误区
以为 Flex 能替代一切。 Flex 是一维的，做卡片网格时「最后一行左对齐」这种需求会非常别扭，得靠给末尾补空元素或者算 margin 来凑。Grid 两行代码就解决了。
把 display: none、visibility: hidden、opacity: 0 当成同一件事。 它们在是否占位、是否可点击、是否触发重排、能否做过渡动画上各不相同，选错了要么布局跳动，要么点不到按钮。
不写死宽高只是「建议」。 实际上这是可维护布局的第一原则。写死尺寸的布局，换个字号、换种语言、内容长一点就崩。优先用 flex、grid、calc、min()/max()/clamp() 让浏览器自己算。
移动端只做了 viewport 就算适配了。 视口设置只是起点，rem 与 vw 方案的选择、1px 边框在高倍屏上的渲染、刘海屏安全区域，每一项都要单独处理。
z-index 是全局可比的。 不是。z-index 只在同一个层叠上下文内部可比。父元素一旦创建了新的层叠上下文（transform、opacity < 1、position 配合 z-index 等都会触发），子元素的 z-index 再大也跳不出去。
本专题全部文章
- CSS Grid 布局，我为什么从 Flex 转过来了CSS Grid 实战：从 Flexbox 转向 Grid 的真实经验。讲清一维与二维布局的分界线、什么场景该用哪个，以及 Grid 怎么两行代码解决「最后一行左对齐」这类 Flex 难题。
- BFC 块格式化上下文：触发条件与三类布局问题的解法BFC 块格式化上下文详解：CSS 规范原文怎么定义 BFC、哪些属性会触发它，以及用 BFC 解决外边距合并、高度塌陷、文字环绕三类经典布局问题的具体做法。
- CSS 布局实战套路：从原则到桌面与手机页面落地CSS 布局实战套路：尽量不写死宽高、优先用 calc 与 flex、布局层与内容层分离等原则，以及水平垂直居中、圣杯布局、等分栏等常见结构的可靠写法。
- Flex 弹性布局完全指南：容器与项目属性逐个讲清Flex 弹性布局完整指南：容器六个属性与项目六个属性逐个讲清，flex-grow/shrink/basis 的计算规则，以及主轴交叉轴对齐、换行、排序的实际用法。
- 移动端响应式布局：媒体查询、适配策略与断点设计移动端响应式页面实现：viewport 设置、DevTools 设备模拟的用法、rem 与 vw 两种适配方案的取舍，以及 1px 边框、安全区域等移动端特有问题的处理。
- CSS 层叠上下文与 z-index：七层绘制顺序与失效原因CSS 层叠上下文与层叠顺序深入：哪些属性会创建新的层叠上下文、同一上下文内七层的绘制先后顺序，以及为什么有时 z-index 设再大也压不住另一个元素。
- CSS 宽高计算与文本处理：从盒模型到溢出省略CSS 宽度与高度深入：怎么用 Chrome DevTools 的 Computed 面板查元素实际尺寸，以及 width/height 在不同盒模型、不同 display 下的计算规则和百分比参照对象。
- CSS min()、max()、clamp() 用法CSS 比较函数 min()、max()、clamp() 使用指南：怎么用它们做响应式字号与自适应容器宽度，替代大量媒体查询，附浏览器兼容情况与实际场景示例。
- CSS 单位完全指南：px、em、rem、vw 的换算基准与选用CSS 的值与单位详解：px、em、rem、vw/vh、百分比等长度单位的换算基准与适用场景，以及颜色、角度、时间等各类值的完整写法。
- CSS 浮动 float 与清除浮动CSS 浮动 float 详解：浮动元素如何脱离常规流、对周围布局造成什么影响，以及高度塌陷问题的成因与几种清除浮动的方案对比。
- CSS 外边距合并（margin collapsing）CSS 外边距合并（margin collapsing）详解：兄弟元素、父子元素、空元素三种合并情形分别怎么发生，合并后取较大值的规则，以及用 BFC 阻止合并的具体做法。
- CSS 定位 position 详解CSS position 定位详解：static、relative、absolute、fixed、sticky 五种取值的行为差异，绝对定位到底相对谁，以及不设置 top/left 时元素会停在什么位置。
