最稳双栏布局用display: flex，父容器设flex，左栏flex: 0 0 240px，右栏flex: 1；Grid更灵活但不兼容IE，需display: grid+grid-template-columns: 240px 1fr；禁用float以防塌陷。
用 display: flex 实现最稳的双栏布局
直接上手就能用，不用浮动、不依赖 Grid 兼容性，所有现代浏览器包括 Edge 17+ 都支持。核心是父容器设 display: flex，子元素控制宽度比例。
常见错误是忘记给父容器设 height 或 min-height，导致内容撑不开、右侧栏“消失”；或者对子元素用 float 混搭，反而破坏 Flex 流程。
- 左侧固定 240px，右侧自适应：
flex: 0 0 240px和flex: 1 - 左右等宽（各 50%）：
flex: 1两个都写 - 想留间隙？用
gap: 16px（父容器上），别用margin避免塌陷
<div style="display: flex; gap: 16px;"> <aside style="flex: 0 0 240px; background: #f5f5f5;">侧边栏</aside> <main style="flex: 1; background: #fff;">主内容区</main> </div>
用 grid-template-columns 做更灵活的双栏（推荐新项目）
Grid 适合需要响应式断点切换（比如小屏变单栏）、或带页眉/页脚的完整布局。但注意 IE 完全不支持，如果必须兼容 IE11，就别碰这个方案。
容易踩的坑是只写 grid-template-columns: 240px 1fr 却忘了加 display: grid，结果样式完全不生效；或者误用 grid-column 在子元素上强行分栏，反而让结构难维护。
立即学习“前端免费学习笔记（深入）”；
- 基础双栏：
display: grid; grid-template-columns: 240px 1fr; - 响应式：配合
@media (max-width: 768px)改成1fr单列 - 想让主内容区占满剩余高度？父容器需有明确高度，再加
grid-auto-rows: 1fr
<div style="display: grid; grid-template-columns: 240px 1fr; min-height: 100vh;"> <header style="grid-column: 1 / -1; background: #333;">顶部</header> <aside>导航</aside> <main>内容</main> </div>
为什么不要用 float 写双栏
不是不能用，而是太容易出问题：浮动元素脱离文档流，父容器高度塌陷、后续元素上移、清除浮动（clear: both）写错位置就白搭。现在连 Bootstrap 5 都已弃用 float 布局类。
如果你在老项目里看到 float: left + overflow: hidden 强制包裹，那只是权宜之计，不是解法。真要兼容极旧浏览器，建议用 inline-block 配合 vertical-align: top，至少不会塌陷。
- 浮动双栏必须配
clearfix类或伪元素::after清除 -
inline-block方案要注意 HTML 中换行符会变成空格，得写成<div></div> <div></div>紧挨着，或设父容器font-size: 0
移动端双栏要特别注意的三件事
双栏在手机上基本不可用，但很多人忘了关掉。别指望用户横向滚动看侧边栏——体验极差，还可能被搜索引擎判为移动不友好。
- 用
@media (max-width: 768px)把双栏强制切回单列（flex-direction: column或grid-template-columns: 1fr） - 侧边栏如果是导航，记得加
position: sticky或抽成汉堡菜单，别让它直接堆在顶部下面 - 测试时真机横屏不是重点，重点是竖屏下是否可读、按钮是否够大、触摸区域是否充足
最常被忽略的是：双栏的 CSS 变量或 class 名如果没加媒体查询隔离，PC 端写的 width: 240px 会直接透传到手机上，把内容挤成窄条——检查 computed styles 时多看一眼设备宽度下的实际值。
