别再死磕 float 了！HTML 两栏布局的 3 种高解法，代码少效果稳

做前端开发这几年，遇到最多的需求大概就是“左边菜单右边内容”。这种经典的两栏布局，看似简单，实则藏着不少门道。早些年我们还在为清除浮动头疼，现在技术栈更新换代，如果你还只盯着一种写法不放，迟早会踩坑。今天不整虚的，直接聊聊目前最实用的几种实现方案，以及它们各自的适用场景。

现代首选：Flexbox 弹性布局

说到两栏布局，Flexbox 绝对是目前的当红炸子鸡。它的核心逻辑是把容器变成弹性盒子，子元素根据设定自动分配空间。

假设你要做一个左侧固定宽度的导航栏，右侧自适应的内容区。以前可能需要算百分比，现在只要三行代码：

.container {
  display: flex;
}
.sidebar {
  width: 200px; /* 固定宽度 */
}
.content {
  flex: 1; /* 占据剩余空间 */
}

这种做法最大的优势在于垂直居中极其方便。如果两边高度不一致，想让内容区垂直对齐，加个 align-items: center 就能搞定。而且它对响应式非常友好，当屏幕变窄时，可以一键切换成上下堆叠结构，不需要重写太多样式。

不过要注意一点，Flex 更适合一维布局，如果是复杂的网格系统，它可能会显得力不从心。

强力控场：CSS Grid 网格布局

如果你的项目对排版精度要求很高，或者需要处理更复杂的对齐关系，Grid 是更好的选择。它天生就是为二维布局设计的，写起来甚至比 Flex 更像在画图。

同样的左中右结构，用 Grid 来写简直清爽：

.wrapper {
  display: grid;
  grid-template-columns: 200px 1fr; /* 明确定义列宽 */
  gap: 20px; /* 轻松设置间距 */
}

这里最爽的是 gap 属性，以前为了在左右栏中间留白，要么写 margin，要么搞额外的 div，现在一行代码就解决了。而且 Grid 支持重叠放置，如果后续你想做一个悬浮侧边栏覆盖在主内容上，只需调整定位策略即可，无需改动 HTML 结构。

虽然 Grid 兼容性好于 IE，但在某些老旧的后台管理系统里可能还需要考虑降级方案。

情怀与兜底：浮动（Float）布局

虽然现在不推荐新代码用 Float，但维护旧项目时，你很难避开它。很多遗留系统的布局逻辑是基于浮动的，理解它的原理依然重要。

浮动布局的本质是让元素脱离文档流。要实现等高的双栏，通常需要配合 父级 overflow 或者 clear 技巧：

.container::after {
  content: "";
  display: table;
  clear: both;
}

为什么还要知道这个？因为它是历史包袱。有时候你接手一个项目，发现改用了 Flex 反而导致周围样式错乱，这时候保持原有的浮动结构，针对性地修补问题，往往比重构全局更稳妥。但切记，不要在新的项目里刻意去学这套写法，除非是为了兼容极低版本的浏览器。

选型建议：怎么挑才合适？

没有最好的布局，只有最适合的场景。

• 如果是常规的后台管理、博客侧边栏，Flexbox 足够轻便且强大，开发效率高。
• 如果是数据大屏、复杂的卡片矩阵，或者对列间距有严格要求，Grid 能减少你的计算量。
• 只有在维护十年前的老代码，或者必须兼容极旧设备时，才被动考虑浮动方案。

布局只是工具，关键是别让技术限制业务。多尝试不同方案的组合，比如用 Flex 做局部组件，Grid 做整体框架。随着移动端流量占比越来越大，记得写完定稿后，一定要在手机屏幕上拉一拉看看效果。自适应不是选项，而是标配。下次开工前，花五分钟思考一下选哪种布局，能帮你省下后期无数个调 CSS 的夜晚。