CSS布局应先掌握display、position和文档流：display的block/inline/inline-block决定元素占行与尺寸行为；position的static/relative/absolute/fixed控制是否脱离文档流；float需处理父容器塌陷；Flex/Grid是进阶方案，非起点。

别从 Flex 或 Grid 开始学 CSS 布局——它们是解决方案，不是起点。真正卡住新手的，是没搞清 display、position 和文档流这三样东西怎么配合工作。

理解 display 的三种核心值：block / inline / inline-block

几乎所有布局混乱，都源于对这三个值的行为差异没建立直觉。它们决定元素“占不占整行”“能不能设宽高”“怎么和旁边元素相处”：

• display: block：独占一行，width/height/padding/margin 全部生效（如 、
  ）
• display: inline：不换行，无视 width/height，vertical-align 有效（如 、）
• display: inline-block：不换行，但 width/height 生效，可对齐（适合做导航菜单项或图标文字组合）

常见错误：给 设 height 没反应 → 它默认是 inline，得先改成 inline-block 或 block。

掌握 position 的四种取值和文档流关系

position 不是“让元素动起来”的开关，而是“要不要脱离文档流”的开关。脱离了，别的元素就当它不存在：

• position: static（默认）：完全在文档流里，top/left 等无效
• position: relative：仍在文档流中占位，但可用 top/left 相对自己原始位置偏移
• position: absolute：完全脱离文档流，定位参考的是最近的 position 不为 static 的祖先（不是屏幕左上角！）
• position: fixed：脱离文档流，参考视口定位，滚动不跟随

典型陷阱：position: absolute 子元素找不到定位父容器 → 检查父级是否设置了 position: relative（哪怕只是用来当“定位上下文”，不需要偏移）。

用 float 做简单两栏时，必须处理父容器塌陷

虽然现代布局多用 Flex/Grid，但很多老项目、邮件模板、图文混排仍用 float。新手写完两栏发现父 高度变成 0，是因为浮动元素已脱离文档流：

.container {
  border: 1px solid #ccc;
}
.left {
  float: left;
  width: 200px;
}
.right {
  float: right;
  width: calc(100% - 200px);
}

解决方法只有两个靠谱的：

• 给父容器加 overflow: hidden（最轻量，但可能影响子元素溢出显示）
• 在父容器末尾加一个清除浮动的空元素：

别用 float 做三栏以上复杂布局——它本就不为此设计，维护成本高，响应式难做。

Flex 布局前，先确认你真的需要它

Flex 不是“更高级的 float”，它是为一维布局（单行或单列）优化的。如果你的需求是：

• 水平居中一个按钮 → text-align: center + display: inline-block 就够了
• 垂直+水平居中一个弹窗 → position: absolute + transform: translate(-50%, -50%) 更直接
• 导航栏等宽分布 → display: flex + justify-content: space-between 才是它该出场的时候

过早套用 display: flex 容易掩盖对基础流式行为的理解缺失。先能手写一个不依赖 Flex 的响应式导航（用 inline-block + @media），再学 Flex 才有判断力。

文档流是隐性的，但它比任何 CSS 属性都重要。所有“为什么这个元素没按我想的排”“为什么 margin 不生效”“为什么父容器没高度”，答案八成藏在 display 和 position 对文档流的改动里。