现代双栏布局应优先使用display: flex或display: grid：flex兼容IE11+、语义清晰，需外层容器设flex，侧栏用flex: 0 0 240px，主内容用flex: 1；grid更灵活支持gap和响应式重排，但不兼容IE，推荐grid-template-columns: 240px 1fr配合gap: 16px及媒体查询切换单列。
双栏布局不需要框架也能做，但直接写 float 或手撸 position 容易塌陷、错位、响应失效——现代项目该用 display: flex 或 display: grid，二者选其一即可落地，别混用。
用 display: flex 实现稳定双栏（主内容 + 侧边栏）
这是目前最稳妥、兼容性好（IE11+）、语义清晰的方案。关键不是“怎么排”，而是“谁当容器、谁当子项”。
常见错误现象：flex 写在了 body 上却忘了设高度；侧边栏固定宽度后主内容没加 flex: 1，导致内容溢出或不撑开。
- 把双栏最外层容器设为
display: flex，比如一个<div class="layout"> <li>侧边栏加固定宽（如 <code>width: 240px）或flex: 0 0 240px（推荐，更可控） - 主内容区必须加
flex: 1，否则它不会自动占满剩余空间 - 若需侧边栏在右，用
flex-direction: row-reverse，别靠margin-left: auto这类不可靠方式
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="layout"> <aside class="sidebar">目录</aside> <main class="content">正文</main> </div>
CSS：
.layout { display: flex; }
.sidebar { flex: 0 0 240px; }
.content { flex: 1; }
用 display: grid 做更灵活的双栏（带间距/自适应断点）
当你需要明确列宽比例、间隙、或未来要扩展成三栏/响应式重排时，grid 更直接。但它在 IE 中完全不可用，若需支持 IE，请绕道。
常见错误现象：漏写 grid-template-columns；用 fr 单位却没限制最小宽度，小屏下侧边栏被压缩到看不见；间隙用了 gap 却忘了父容器没设 display: grid。
-
grid-template-columns: 240px 1fr表示左栏固定、右栏占剩余全部 - 想让两栏等宽？写成
1fr 1fr；想左窄右宽？写成minmax(200px, 240px) 2fr - 加间隙统一用
gap: 16px，它同时作用于行与列，比margin更干净 - 响应式切换：在
@media里改grid-template-columns即可，不用动 HTML 结构
示例 CSS：
.layout {
display: grid;
grid-template-columns: 240px 1fr;
gap: 16px;
}
@media (max-width: 768px) {
.layout { grid-template-columns: 1fr; }
}
为什么不要用 float 做双栏
不是不能用，是没必要。现在所有主流浏览器都支持 flex 和 grid，而 float 的副作用太具体：父容器高度塌陷、清除浮动代码冗余、文字环绕逻辑干扰布局、响应式时极易错乱。
如果你在维护老项目看到 float 双栏，优先考虑渐进替换，而不是在原基础上打补丁。尤其注意：overflow: hidden 清浮动会意外裁剪 position: absolute 子元素，这个坑很多人踩过还记不住。
真正难的不是写出来，是决定哪部分该收缩、哪部分该撑开、以及在小屏下要不要折叠侧边栏——这些逻辑不在 CSS 里，而在你对内容优先级的判断中。
