最可靠主布局方式是 display: flex 和 display: grid；flex 适合一维线性结构（如 header+main+sidebar+footer），需父容器设 display: flex 才生效；grid 适合二维精确定位场景（如仪表盘），IE11 不支持需降级；table 和 float 因语义错误、可访问性差及脱离文档流等问题不推荐用于主结构。
display: flex 和 display: grid 是当前最可靠、最主流的两种布局方式，其余如 float、position: absolute、table 均不推荐用于页面主结构。
用 display: flex 做一维主结构布局
适合 header + main + sidebar + footer 这类线性排列场景，控制逻辑清晰，响应式适配成本低。
- 父容器必须设
display: flex，否则子元素上写flex: 1或justify-content全无效 -
flex-direction: column在移动端首屏堆叠时比row更自然 - 侧边栏固定宽 + 主内容自适应？写成
sidebar { flex: 0 0 240px; }+main { flex: 1; } - 含长文本或 URL 的子元素容易撑破容器，加
min-width: 0才能触发overflow: hidden
用 display: grid 做二维区域划分
适合仪表盘、杂志式多模块、带固定头部/侧边+滚动内容区等需要行列精确定位的场景。
- 别一上来就用
grid-template-areas，命名区域维护成本高，改一个名字全得同步；优先用grid-template-columns: 240px 1fr 320px这类线性定义 -
gap（或grid-gap）比手动给子元素加margin更安全，避免 margin 合并问题 - 子元素默认不继承父级
text-align，居中需单独设justify-self: center或place-self: center - IE11 完全不支持
grid（前缀也无效），若需兼容，得 fallback 到flex或float
为什么不能用 <table> 或 <code>float 做主布局
<table> 的语义是呈现表格化数据，不是排版工具；<code>float 本质是让元素脱离文档流，必须配合 clear 防止塌陷，且无法解决垂直居中、等高、响应式重排等现代需求。
- 用
<table> 布局时，屏幕阅读器会按表格逻辑读取，破坏可访问性结构 <li> <code>float在 Flex/Grid 普及后已退为“局部微调手段”，比如文字环绕图片，而非整页结构 - 所有现代 CSS 布局都依赖父容器开启对应上下文（
flex/grid），而float是对单个元素施加副作用，不可控性高
真正难的不是选哪种方式，而是理解「布局能力由父容器决定」——子元素再怎么写
flex 或 grid-column，只要父容器没开对应 display 模式，就等于没写。
