CSS 两栏布局怎么实现？附 3 种常见布局方案一次讲清

把页面分成左右两块的「两栏布局」，最省事的做法是用 flex：给容器写 display: flex，左栏定宽、右栏 flex: 1 占满剩余空间，几行就搞定，还天然等高。本文一次讲清 3 种主流方案：float 浮动、flex 弹性、grid 网格，并对比它们各自的适用场景。你会看到「父容器高度塌陷」「两栏不对齐」「小屏要堆叠」这些真实开发里高频出现的问题怎么处理。读完你不仅能写出两栏布局，还知道哪种方案最契合自己的项目。今天编程狮就把这块底层逻辑讲透，让你不再靠复制粘贴硬凑样式。

一、两栏布局是什么

两栏布局，本质是把一行的水平空间切成左右两块：左边常放导航、侧边栏、目录，右边放正文、内容区。它在后台系统、文档站、电商详情页里随处可见。比喻一下：像书桌，左边一摞书、右边一片写字区，各占一块、互不挤占。

⚠️ 注意：两栏的「栏」是语义上的左右分区，和具体的 CSS 实现解耦。你可以用浮动、弹性盒、网格任意一种方式去排，效果看上去一样，但兼容性、可维护性和响应式写法差别很大。

另一个容易混的点是「两栏」和「固定加自适应」的关系。多数场景你要的是「左栏固定宽度、右栏随容器伸缩」，而不是两栏都写死像素——后者在小屏上会溢出。判断用哪种方案，先看三件事：要不要兼容老浏览器、要不要两栏等高、要不要一套代码适配手机。这三件事决定了 float、flex、grid 谁更合适，下面逐个拆。另外，两栏布局常和「圣杯布局」「双飞翼布局」这类多栏结构一起出现，理清基础再往上叠会顺手很多。

二、方案一：float 浮动两栏（兼容性最好）

适合谁：要照顾 IE 等老浏览器，或维护祖传的浮动布局代码。代价：父容器会高度塌陷，必须手动清除浮动。

.left { float: left; width: 30%; }
.right { float: left; width: 70%; }
/* 父容器需清除浮动，否则高度塌陷 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

float 让左右两块脱离正常流、贴着容器左边挨个排。想系统补 CSS 基础，CSS 基础教程 里有完整章节。

选 float 的核心原因是兼容性——它是早期唯一可用的多栏手段，老项目里遍地都是。但它有个天生短板：浮动元素不撑开父容器高度，父容器会「塌」成 0，后面的内容会往上挤。解决办法要么是父容器加 overflow: hidden，要么用上面的伪元素 clearfix。float 方案的强项在「稳」，弱项在「僵」：想让两栏等高得额外用负 margin 或 padding hack，想做响应式得在每个断点重写宽度。现代项目除非要兼容老内核，一般不建议新写 float 两栏。但它的思路理解清楚后，对读老代码、接手历史项目很有帮助。

三、方案二：flex 弹性两栏（最推荐）

适合谁：现代浏览器项目，想要简洁、等高、好调。代价：IE9 及以下不支持。

.container { display: flex; }
.side { width: 200px; }
.main { flex: 1; }

display: flex 把容器变成弹性盒，子项默认从左到右排；.side 定宽，.main 用 flex: 1 吃掉剩余空间。flex 布局天然让两栏等高——因为弹性盒的交叉轴默认 stretch，左右栏高度自动对齐到最高那栏。

这是今天最常用、也最省心的方案。想让右栏最小宽度可控，给 .main 加 min-width: 0 防止内容把栏撑破；想让两栏顺序可调，用 order 或把 .side 放到 DOM 后面再用 flex-direction: row-reverse。响应式也很简单：小屏时给容器加 flex-direction: column，两栏就从上到下堆叠，不用重写宽度。和 float 比，flex 把「等高、对齐、伸缩」这些需求都内置了，代码量砍掉一大半。它几乎覆盖了两栏布局的绝大多数场景，除非你需要更复杂的二维网格控制，否则优先选它。

四、方案三：grid 网格两栏（二维最灵活）

适合谁：除了两栏还要顺带控行、控轨道，或想要更语义化的布局。代价：写法比 flex 稍微抽象。

.container {
  display: grid;
  grid-template-columns: 200px 1fr;
}

display: grid 把容器变成网格，grid-template-columns: 200px 1fr 直接声明「第一列 200px、第二列占满剩余」。grid 布局对「列宽轨道」的表达最直观，一行就定下两栏比例。

grid 的强项是二维：如果你以后想在右栏里再分多列、或两栏之间加一条固定间距的分割线，grid-template-columns 改一个数就行，不用嵌套容器。它和 flex 不是替代关系——flex 管内联方向的一维排列，grid 管整张二维盘面。两栏布局这种简单结构两者都能做，但 grid 在「精确控制轨道、对齐线、间隙」上更干净。想做响应式，用 grid-template-columns: 1fr 配合媒体查询切到单列，或上 auto-fit 让列数自适应。新项目如果布局将来可能变复杂，直接上 grid 更省后续重构成本。

五、三种方案怎么选（响应式与等高坑）

选型记住三句话：要兼容老浏览器用 float；现代项目图省事用 flex；布局将来要扩成多列多行用 grid。下面是两个高频坑。

• 响应式堆叠：小屏上两栏并排会挤，必须给容器加媒体查询，断点处把 float 取消、或 flex 改 column、或 grid 改单列。忘了这步，手机打开就是横向滚动条。
• 等高问题：float 方案左右栏各算各的高度，内容少的那栏会短一截；flex 和 grid 默认等高，但若你手动设了固定 height 反而会破功。等高布局优先交给 flex/grid 的自动拉伸。

另一个隐形坑是「栏宽用百分比还是固定值」：左栏定宽、右栏 1fr/flex: 1 最稳；两栏都写死百分比在极端视口下会出现亚像素缝隙。把这三类的边界厘清，两栏布局基本不会再翻车。响应式布局还要和视口单位、图片缩放一起考虑，配合 meta viewport 才能在真机上生效。HTML 结构怎么搭可参考 HTML 结构教程，先把标签语义写对再上样式。

总结

两栏布局，现代项目首选 flex：容器 display: flex，侧栏定宽、主区 flex: 1，天然等高又好调；要兼容老浏览器用 float，但记得清浮动；布局未来会变复杂用 grid，轨道控制最干净。要点带走：

• float 方案父容器会高度塌陷，必须加 clearfix 或 overflow: hidden；
• flex 与 grid 默认让两栏等高，别手贱写死 height 破坏它；
• 响应式断点必须处理，否则小屏会横向溢出。

延伸学习

想把这块知识系统补齐，可以按这个顺序来：

1. 先过一遍 前端专栏：常用布局完全指南，理解布局与交互的衔接；
2. 想看另一种讲法，参考 两栏布局对比笔记 的方案对照；
3. 写完想立刻试，html编译器在线运行 CSS 代码 免安装跑片段。

常见问题

Q：float 方案为什么父容器会塌？

A：因为浮动元素脱离了正常文档流，不再撑开父容器高度，父容器算出来高度是 0，后续内容就会往上挤。解决办法是给父容器加 overflow: hidden，或用伪元素 clearfix::after { clear: both; } 清除浮动，把高度拉回来。

Q：flex 和 grid 该选哪个做两栏？

A：纯左右两栏、将来不变复杂，选 flex 最省事；如果之后要在栏内再分多列、或要精确控制轨道与对齐线，grid 更合适。两者都默认等高，都不用清浮动，比 float 好维护。

Q：小屏上两栏挤在一起怎么办？

A：在媒体查询断点里重排：float 方案取消浮动改为上下块，flex 给容器加 flex-direction: column，grid 把 grid-template-columns 改成单列。核心是让两栏在小屏从上到下堆叠，避免横向溢出。