最可靠主布局方式是 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 做二维区域划分
适合仪表盘、杂志式多模块、带固定头部/侧边+滚动内容区等需要行列精确定位的场景。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 别一上来就用
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
为什么不能用 或 float 做主布局 的语义是呈现表格化数据，不是排版工具；float 本质是让元素脱离文档流，必须配合 clear 防止塌陷，且无法解决垂直居中、等高、响应式重排等现代需求。- 用
布局时，屏幕阅读器会按表格逻辑读取，破坏可访问性结构
-
float 在 Flex/Grid 普及后已退为“局部微调手段”，比如文字环绕图片，而非整页结构
- 所有现代 CSS 布局都依赖父容器开启对应上下文（
flex / grid），而 float 是对单个元素施加副作用，不可控性高
真正难的不是选哪种方式，而是理解「布局能力由父容器决定」——子元素再怎么写 flex 或 grid-column，只要父容器没开对应 display 模式，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
