★ ★ ★ ★ ★

两栏 / 三栏布局有哪些常见写法？

⚡ 速记答案（30 秒）

Float：左右 float，中间不浮动。Flex：display: flex，中间 flex: 1。Grid：grid-template-columns: 200px 1fr 200px。面试让说三种就答：float + flex + grid。

📖 详细讲解

标准面试回答（推荐记住）

两栏三栏布局有多种实现方式。第一种是 Float，左右设置 float，中间不浮动自适应，但需要清除浮动。第二种是 Flex，父元素 display: flex，左右定宽，中间 flex: 1 自适应。第三种是 Grid，父元素 display: grid，grid-template-columns: 200px 1fr 200px 就能实现三栏布局。Flex 和 Grid 是现代推荐写法，代码简洁且不需要清除浮动。

三种布局方案对比

方案	优点	缺点
Float	兼容性好	需清除浮动、代码多
Flex	简洁、强大	IE10+
Grid	最强大	IE11+ 部分支持

✅ 面试要点

•掌握 Flex 和 Grid 现代写法
•了解 Float 的清除浮动问题
•面试至少说出三种方案

💻 代码示例

三栏布局对比

<style>
/* 方案一：Flex（推荐） */
.flex-layout {
  display: flex;
}
.flex-layout .left,
.flex-layout .right {
  width: 150px;
  background: #3b82f6;
}
.flex-layout .center {
  flex: 1;
  background: #1e3a5f;
}

/* 方案二：Grid */
.grid-layout {
  display: grid;
  grid-template-columns: 150px 1fr 150px;
}

/* 方案三：Float + BFC */
.float-layout .left { float: left; width: 150px; }
.float-layout .right { float: right; width: 150px; }
.float-layout .center { overflow: hidden; }
</style>

<div class="flex-layout" style="height: 100px; margin-bottom: 10px;">
  <div class="left">左</div>
  <div class="center">中间自适应</div>
  <div class="right">右</div>
</div>

🎨 效果预览