display: grid 是最直接的多区域分区方式，通过 grid-template-areas 语义化定义布局，配合媒体查询实现响应式；兼容 IE 时可用 flex 套层替代；绝对定位和浮动均不推荐用于主布局。
用 display: grid 快速切出多区域版块
不用算像素、不靠浮动、也不依赖嵌套 div，display: grid 是目前最直接的分区方式。它把容器当成一张可定义行列的坐标纸，你只需要告诉浏览器“顶部放 header、左边放 sidebar、中间是 main、右下是 footer”，它就照做。
常见错误是只写 grid-template-rows 却漏掉 grid-template-columns，结果所有区域堆成一列；或者用 fr 单位时没设最小宽度，导致小屏下内容被压缩变形。
- 用
grid-template-areas写语义化布局，比如：grid-template-areas: "header header header" "sidebar main ads" "footer footer footer";
- 对应子元素加
grid-area: header、grid-area: main等声明 - 注意：
grid-area值必须和grid-template-areas中的字符串完全一致，大小写敏感 - 响应式时，直接在媒体查询里重写
grid-template-areas，比 JS 切换 class 更轻量
如果必须兼容 IE10–11，改用 display: flex 分层组合
flex 本身是一维布局，但可以“套一层”实现二维分区：外层 flex 控制上下结构（header / main+footer），内层再用 flex 拆左右（sidebar / main）。
容易踩的坑是忘记设 flex-shrink: 0，导致 sidebar 在窄屏下被压缩到看不见；或者没给 main 区域设 flex: 1，结果它不占剩余空间，整个布局塌陷。
立即学习“前端免费学习笔记（深入）”；
- 外层容器：
flex-direction: column，header 和 footer 设固定高，main 设flex: 1 - main 区域再设
display: flex+flex-direction: row - sidebar 设
flex: 0 0 240px（不缩放、不增长、宽 240px） - 实际项目中，建议用
min-width配合flex-basis，避免 flex 自动计算出错
position: absolute 只适合固定尺寸的局部区域
绝对定位不是布局工具，而是“钉住某一块”的手段。如果你的 header 高度固定、sidebar 宽度固定、且不随内容伸缩，它能快速生效；一旦涉及响应式或动态内容，就会立刻失控——比如 sidebar 内容变多后溢出、footer 被遮挡、打印样式全乱。
典型错误是给多个同级元素都设 position: absolute，却不设共同的 position: relative 父容器，结果所有元素都相对于 body 定位，互相覆盖。
- 必须确保父容器有
position: relative - 只对尺寸稳定、位置明确的区域用，比如右上角通知 badge、固定悬浮按钮
- 避免用
top/left做整体分区，那等于放弃文档流，后续维护成本极高
别用 float 做多区域主布局
float 的设计初衷是让文字环绕图片，不是划分页面结构。现在强行用它做三栏布局，要清浮动、要处理塌陷、要 hack IE6，还无法实现等高、居中、响应式收缩——现代 CSS 早就不需要它了。
如果你在老项目里看到满屏 float: left + overflow: hidden，说明当时没条件用 grid 或 flex，现在升级时优先替换掉，而不是继续加 patch。
- 检查是否有
clear: both或::after { content: ""; display: table; clear: both; }这类补丁代码 - 替换原则：外层容器加
display: grid或display: flex，子元素删掉所有float和清浮动逻辑 - 特别注意：
float会让元素脱离文档流，影响兄弟元素的 margin collapse，这点常被忽略
