display: flex 是现代浏览器下实现两栏布局的首选方案，语义清晰、对齐可控、响应式友好，推荐用于常规页面主体布局。
用 display: flex 实现两栏布局最稳妥
现代浏览器下，display: flex 是写两栏布局的首选，语义清晰、对齐可控、响应式友好。别再用浮动或绝对定位硬扛了。
常见错误是父容器没设 height 或忘了加 flex-direction: row（虽然默认就是 row，但显式写上更防误读）。
- 左侧固定宽度（如 200px），右侧自适应：给左栏设
flex: 0 0 200px，右栏设flex: 1 - 两栏等宽：都设
flex: 1 - 需要顶部导航+两栏主体？把整个页面结构拆成
header+main，只对main应用 flex
主内容区 用 display: grid 写两栏更简洁
如果只需要静态两栏，grid 一行定义就能搞定，比 flex 更少“胶水代码”。但要注意 IE 不支持（edge 16+ 才开始支持）。
容易踩的坑是忘记给容器设 display: grid，或者误把 grid-template-columns 写在子元素上。
立即学习“前端免费学习笔记（深入）”；
- 固定+自适应：用
grid-template-columns: 200px 1fr - 等分两栏：用
grid-template-columns: 1fr 1fr或简写为1fr 1fr - 想留间隙？加
gap: 1rem，别用margin挤子元素
主内容区 兼容老浏览器时用 Float 要手动清除浮动
如果必须支持 IE9 及以下，float 还得用，但别只写 float: left 就完事——父容器高度会塌陷，导致后续元素错位。
清除浮动不是加个
就算完，那只是“能用”，不是“该用”。
- 推荐用伪元素清除：
main::after { content: ""; display: table; clear: both; } - 左栏
float: left; width: 200px;，右栏overflow: hidden;（触发 BFC，自动包裹） - 避免给右栏也设
float，否则宽度计算易出错，且难以控制垂直对齐
position: absolute 两栏只适合特定场景
绝对定位适合工具面板、弹窗侧边栏这类脱离文档流的布局，**不适合常规页面主体两栏**。强行用会导致可访问性差、打印样式失效、响应式难适配。
如果你发现写了 top/left 后内容被遮挡或滚动异常，大概率是没处理好父容器的 position: relative 上下文，或者没预留足够的 padding 避让。
- 仅当侧栏是悬浮操作区（比如代码编辑器的文件树）才考虑 absolute
- 必须配
position: relative在父容器上，否则定位基准是视口 - 记得用
inset-block-start/inset-inline-start替代老式top/left，更利于 RTL 支持
实际项目里，flex 和 grid 差不多能覆盖 95% 的两栏需求。真正容易被忽略的是：**两栏之间的间距要不要计入容器宽度、是否要支持键盘焦点顺序、暗色模式下背景色对比度是否达标**——这些不是“布局写完就结束”的事。