如何使用CSS实现三栏布局_float布局经典案例-css教程-PHP中文网

如何使用CSS实现三栏布局_float布局经典案例

P粉602998670

发布： 2025-11-23 20:03:06

原创

198人浏览过

答案：使用float实现三栏布局，左右固定宽度并分别左、右浮动，中间通过左右margin留白自适应；需注意浮动方向、margin与宽度匹配，并推荐用伪元素清除浮动以防止父容器塌陷。

如何使用css实现三栏布局_float布局经典案例

三栏布局是网页设计中常见的布局方式，其中两侧固定宽度，中间自适应。使用 float 实现是一种经典且兼容性较好的方法。下面详细介绍如何用 float 完成这一布局。

基本结构与需求

目标：实现左右两栏固定宽度（例如 200px），中间栏自适应剩余空间。三栏高度一致，从上到下排列。

HTML 结构如下：

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

CSS 样式实现

核心思路：左右两栏使用 float 定位，中间栏通过 margin 留出空间实现自适应。

立即学习“前端免费学习笔记（深入）”；

具体样式：

AI TransPDF

高效准确地将PDF文档翻译成多种语言的AI智能PDF文档翻译工具

231

查看详情

.left {
  width: 200px;
  height: 400px;
  background: #f40;
  float: left;
}

.right {
  width: 200px;
  height: 400px;
  background: #04f;
  float: right;
}

.main {
  height: 400px;
  background: #0f4;
  margin-left: 200px;
  margin-right: 200px;
}