面试题：怎么实现网页两栏布局？

两栏布局是前端开发中最基础且常见的布局模式，通常分为两种形式：

1. 一栏固定，一栏自适应
2. 两栏等宽或按比例分配

以下是 多种实现方式，从传统到现代，全面覆盖，适合在面试中展示技术深度。

---

一、什么是两栏布局？

• 左侧栏固定 + 右侧栏自适应（最常见）
• 左侧栏自适应 + 右侧栏固定
• 两栏等宽或按比例分布

✅ 目标：布局灵活、响应式友好、代码简洁。

---

二、实现方式

✅ 方式 1：Flexbox 布局（推荐 ⭐⭐⭐⭐⭐）

现代布局首选，简单、强大、兼容性好。

场景 1：左固定，右自适应

<div class="container">
  <div class="left">左侧固定</div>
  <div class="right">右侧自适应</div>
</div>

.container {
  display: flex;
  height: 100vh;
}

.left {
  width: 200px; /* 固定宽度 */
  background: #f0f0f0;
}

.right {
  flex: 1; /* 占据剩余所有空间 */
  background: #ddd;
}

场景 2：左自适应，右固定

.left {
  flex: 1; /* 自适应 */
}

.right {
  width: 150px; /* 固定 */
}

场景 3：两栏按比例

.left {
  flex: 2; /* 2份 */
}

.right {
  flex: 1; /* 1份 */
}

✅ 优点：

• 代码简洁
• 天然支持等高列
• 响应式友好（可结合 flex-wrap）

---

✅ 方式 2：CSS Grid 布局（现代推荐 ⭐⭐⭐⭐⭐）

更强大的二维布局方案。

.container {
  display: grid;
  grid-template-columns: 200px 1fr; /* 左固定，右自适应 */
  height: 100vh;
}

或按比例：

grid-template-columns: 2fr 1fr; /* 左右比例 2:1 */

✅ 优点：

• 一行代码定义布局
• 1fr 表示“一份可用空间”，完美实现自适应
• 支持复杂嵌套

---

✅ 方式 3：浮动 + margin（传统方法 ⭐⭐）

使用 float 和 margin 实现，需注意清除浮动。

左固定，右自适应：

.left {
  float: left;
  width: 200px;
  background: #f0f0f0;
}

.right {
  margin-left: 200px; /* 为左栏留出空间 */
  background: #ddd;
}

❌ 缺点：

• 需清除浮动（可用 overflow: hidden 创建 BFC）
• 脱离文档流问题
• 不推荐用于新项目

---

✅ 方式 4：绝对定位（特定场景 ⭐⭐）

适用于脱离文档流的布局。

.container {
  position: relative;
  height: 100vh;
}

.left {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 100%;
}

.right {
  margin-left: 200px; /* 避开左栏 */
}

❌ 缺点：脱离文档流，影响其他元素

---

✅ 方式 5：Table-cell 布局（已过时 ⭐）

模拟表格单元格行为。

.container {
  display: table;
  width: 100%;
}

.left, .right {
  display: table-cell;
}

.left {
  width: 200px;
}

❌ 缺点：语义不清晰，已被 Flex/Grid 取代

---

✅ 方式 6：inline-block + vertical-align（行内布局 ⭐⭐）

适用于行内元素或简单布局。

.container {
  font-size: 0; /* 消除间隙 */
}

.left, .right {
  display: inline-block;
  vertical-align: top;
  font-size: 16px;
}

.left {
  width: 200px;
}

.right {
  width: calc(100% - 200px);
}

❌ 缺点：需处理空白间隙，font-size: 0 可能影响继承

---

三、响应式扩展（面试加分点）

结合媒体查询，小屏幕时变为单列布局：

@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

  .left, .right {
    width: 100% !important;
  }
}

✅ 体现响应式思维

---

四、面试加分点

点位	说明
🌟 现代首选 Flex/Grid	推荐使用 flex 或 grid，语义清晰
🌟 等高列自动实现	Flex 和 Grid 天然支持，无需额外处理
🌟 1fr 和 flex: 1	理解“剩余空间分配”机制
🌟 BFC 清除浮动	使用 overflow: hidden 防止高度塌陷
🌟 移动优先	先写移动端样式，再增强大屏

---

✅ 总结对比表

方法	实现难度	推荐度	适用场景
Flexbox	简单	⭐⭐⭐⭐⭐	通用、响应式
Grid	简单	⭐⭐⭐⭐⭐	复杂布局
浮动 + margin	中等	⭐⭐	兼容老浏览器
绝对定位	中等	⭐⭐	固定布局
inline-block	中等	⭐	行内元素布局

---

💬 一句话总结：

“现代开发中，优先使用 display: flex 或 display: grid 实现两栏布局，代码简洁、维护方便、响应式友好；传统浮动方法仅用于兼容或学习目的。”

在面试中，能根据场景选择合适方案，并解释优缺点，会显得你具备扎实的布局功底和现代开发思维。