现代页面左右分栏应优先使用display: flex或display: grid，二者无需浮动、绝对定位或hack；float仅在兼容IE8–9时考虑，且需处理塌陷与清除问题；flex通过flex: 1实现右栏自适应，grid用grid-template-columns: 200px 1fr精确控制列宽，响应式切换只需修改flex-direction或grid-template-columns。
现代页面左右分栏，直接用 display: flex 或 display: grid 就能解决，不需要浮动、绝对定位或 hack 手段。旧方案（如 float）仅在必须兼容 IE8–9 时才考虑，且需额外处理清除浮动问题。
用 Flexbox 实现左右分栏（推荐）
Flex 是目前最直观、可控的方案，尤其适合主次分明的两栏结构（如侧边栏 + 主内容区）。
-
display: flex必须加在父容器上，子元素默认沿主轴（row）水平排列 - 左栏固定宽：设
width: 200px并加flex-shrink: 0，防止内容多时被压缩 - 右栏自适应：设
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0），它会吃掉剩余所有空间 - 若右栏内容极少却撑不满高度，需给父容器加
min-height: 100vh或明确高度 - 避免在子元素上同时设
width和flex，二者冲突；优先用flex控制伸缩行为
示例关键 CSS：
.container { display: flex; }
.left { width: 200px; flex-shrink: 0; }
.right { flex: 1; }
用 Grid 实现左右分栏（精确控制场景）
Grid 更适合需要列宽比例稳定、或未来可能扩展为三栏/带间隙的场景，语义更清晰。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 父容器设
display: grid，用grid-template-columns: 200px 1fr定义两列 -
200px是左栏固定宽度，1fr表示右栏占剩余全部空间（不是百分比，不随内容变化） - 若要列间留空隙，加
gap: 12px即可，无需手动 margin - 子元素无需额外设置浮动、flex 或 width —— Grid 自动按列轨道分配位置
- 注意移除子元素上残留的
float、display: inline-block等干扰样式
示例关键 CSS：
.container { display: grid; grid-template-columns: 200px 1fr; gap: 12px; }
为什么不要用 float 做左右分栏（除非真要兼容 IE9）
float 不是“不能用”，而是它带来的副作用远超收益：脱离文档流、父容器高度塌陷、需要手动清除浮动、响应式切换困难。
- 常见错误：只给左栏
float: left，右栏没处理，结果右栏跑到左栏下方 - 补救方式有二：
overflow: hidden在父容器上（简单但可能截断阴影/下拉菜单），或加<div style="clear:both"></div>（冗余 DOM） - 右栏若用
margin-left撑开空间，一旦左栏宽度变，右栏就要同步改 —— 维护成本高 - 媒体查询中想改成单列堆叠时，
float需重置所有相关属性，而 Flex/Grid 只需改flex-direction或grid-template-columns
响应式左右分栏怎么切换单列
这是实际项目中最常漏掉的一环：桌面端两栏，移动端必须堆叠。Flex/Grid 切换极其轻量。
- Flex 方案：在小屏下对父容器加
flex-direction: column，左右栏自然垂直排列 - Grid 方案：改
grid-template-columns: 1fr，单列填满宽度；也可用@media (max-width: 768px)覆盖原定义 - 别忘了给左右栏加
width: 100%或max-width: 100%，否则图片/容器可能溢出屏幕 - 如果左栏是导航，建议用
position: sticky或独立滚动区域，避免长内容拖动时整个页面滚动
真正容易被忽略的是：左右栏内容高度差异大时，Flex 默认按 align-items: stretch 拉齐，导致短内容区域出现大片空白 —— 此时加 align-items: flex-start 更符合多数视觉预期。
