CSS Grid 是现代浏览器下实现左右分栏最直接可靠的方式，推荐 grid-template-columns: 250px 1fr 并设置 body { margin: 0; height: 100vh; display: grid; }，避免因高度缺失或默认 margin 导致布局异常。
用 CSS Grid 实现左右分栏，最直接可靠
现代浏览器下，display: grid 是实现左右分栏最干净的方式，不需要浮动、清除或额外 wrapper 元素。关键在于把 body 或容器设为 grid，并定义两列轨道。
常见错误是只写 grid-template-columns: 1fr 1fr 却忘了设置 height 或内容撑不满导致右侧“看不见”；或者用 minmax() 却没限制最小宽度，小屏下崩成一列。
-
grid-template-columns: 250px 1fr—— 左侧固定 250px，右侧自适应（推荐大多数后台/文档类页面） -
grid-template-columns: 1fr 2fr—— 左右按比例分配，但需注意内容多时右侧可能过宽 - 必须给父容器设
height: 100vh或明确高度，否则grid不会拉满视口 - 在
index.html中，直接对应用 grid 有时会和默认 margin 冲突，建议加body { margin: 0; }
<style>
body {
margin: 0;
display: grid;
grid-template-columns: 250px 1fr;
height: 100vh;
}
.sidebar { background: #f0f0f0; }
.main { padding: 1rem; overflow-y: auto; }
</style>
<body>
<aside class="sidebar">菜单</aside>
<main class="main">内容区</main>
</body>
Flexbox 也能做，但要注意主轴方向和收缩行为
如果项目要兼容 IE10+，display: flex 是更稳妥的选择。但得小心 flex-shrink 默认为 1 —— 当内容窄于容器时，左侧栏可能被压缩变形。
典型问题：左侧导航文字换行错乱、图标挤在一起，其实是 flex-shrink: 1 在作祟；或者没设 min-width，缩放窗口时左侧突然塌陷。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 给左侧元素加
flex: 0 0 250px（即不伸缩、不收缩、基础宽度 250px） - 右侧用
flex: 1占满剩余空间，比flex: 1 1 auto更可控 - 必须设
html, body { height: 100% }，否则height: 100%在 flex 容器里无效 - IE 下
flex: 1有 bug，建议显式写flex: 1 1 0
不要用 float 实现左右分栏，现在真没必要
虽然 float: left + overflow: hidden 还能跑，但它的根本问题是脱离文档流 —— 后续元素定位不可预测，清浮动代码容易漏，响应式切换列数时几乎要重写。
真实踩坑场景：加了 position: sticky 的侧边菜单，在 float 布局里失效；或者右侧用了 transform 动画，结果整个布局偏移。
- float 布局下，
height无法继承，100vh在子元素上基本等于没写 - 没有 gap 控制，左右间距得靠
margin硬调，响应式时维护成本高 - Flex/Grid 已覆盖 98%+ 浏览器（包括 Android 4.4+ 和 iOS 9+），没必要为旧版本妥协
响应式断点怎么加？别只改 column 数量
单纯在媒体查询里把 grid-template-columns 改成 1fr 只是让列变单列，但用户真正需要的是“折叠侧边栏”，而不是让它消失或堆在顶部。
容易忽略的点：移动端点击展开菜单后，遮罩层 z-index 是否盖住内容；或者用 visibility: hidden 隐藏侧边栏，却忘了它仍占 layout 空间。
- 用
transform: translateX(-100%)+transition实现滑入滑出，比display: none更顺滑 - 左侧栏加
width: 250px和flex-shrink: 0（flex）或min-width: 250px（grid），避免缩放时内容挤压 - 在
@media (max-width: 768px)里，把grid-template-columns改为1fr，同时给.sidebar加position: fixed和inset: 0实现抽屉效果
复杂点其实在交互逻辑：比如点击主内容区是否自动收起侧边栏，或者 URL hash 变化时是否同步展开对应菜单项——这些已经超出纯布局范畴，得靠 JS 配合，但前提是 CSS 分栏本身稳得住。
