Grid更适合主容器布局，因其二维可控性强、无需脱离文档流、响应式健壮；float易致塌陷、清除困难、维护成本高，且无法精准控制区域宽高与对齐。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

直接用 CSS Grid 做主容器布局，比 Flex 更可控、比 float/absolute 更健壮；别用 <table> 或纯 <code>float 模拟工作台结构——语义错、维护难、响应式崩。

为什么不用 float 做工作台主结构

工作台需要稳定区域划分（header/sidebar/main/footer），而 float 会让元素脱离文档流，一旦子内容高度不一致或文字过长，就容易出现塌陷、遮挡、清除失败等问题。即使加了 ::after 伪类清除，sidebar 和 main-content 的宽高对齐仍得靠额外 hack。

• 父容器没设 overflow: hidden 或 display: flow-root，浮动子项会“漏出”容器边界
• main-content 内部若含长 URL 或中文连续无空格文本，float 下无法自动换行或截断
• 响应式时改 float: left → none，必须同步重写所有清除逻辑，极易遗漏

display: grid 怎么定义工作台四区结构

核心是用 grid-template-rows 和 grid-template-columns 显式控制轨道，避免依赖 grid-template-areas 这种易出错的命名方式。

• 侧边栏固定宽：用 grid-template-columns: 240px 1fr，其中 240px 给 sidebar，1fr 给 main-content
• 顶部/底部固定高：grid-template-rows: 60px 1fr 40px，1fr 让 main-content 自适应剩余空间
• 每个区域通过 grid-column / grid-row 精确定位，例如 header 设为 grid-column: 1 / -1; grid-row: 1
• 用 gap: 8px 统一区域间距，比手动设 margin 更可靠，不会触发 margin 合并

display: flex 适合在哪一层用

Grid 负责宏观区域划分，Flex 交给内部组件级布局——比如 header 里的 logo + 用户头像右对齐，或 card 内图标+文字+按钮的横向排列。

立即学习“前端免费学习笔记（深入）”；

• header 上设 display: flex; justify-content: space-between; align-items: center
• card 内部用 display: flex; gap: 12px 排图标、标题、操作按钮
• 切记：子元素设 flex: 1 前，父容器必须有 display: flex，否则完全无效
• 含长文本的 flex 子项要加 min-width: 0，否则默认不收缩，可能撑破容器

兼容性与语义陷阱要盯紧

IE11 不支持 display: grid（哪怕加前缀），如果项目还要求兼容，得 fallback 到 Flex；但更关键的是 HTML 结构本身——别为了“看起来像工作台”而滥用 <div class="header">，该用 <code><header></header> 就用语义化标签。

• <header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 不只是样式钩子，它们影响屏幕阅读器顺序和 SEO 权重
• 移动端需强制加 <meta name="viewport" content="width=device-width, initial-scale=1">，否则 Grid 容器可能被缩放错乱
• 所有图标（如 Font Awesome）必须加 fa-fw 类，否则字重不同会导致菜单项左右晃动