本教程共 44 篇 · 第 29 篇 · 更新于 2026-07-29 · 约 10 分钟阅读

29. 传统布局

本节目标：掌握基于 float 的传统页面布局方法，实现两栏、三栏和常见导航菜单布局。

布局的基本思路

传统布局主要依赖 float 和 position。核心思路是：

用 float 让块级元素横向排列
用 width 控制每列的宽度
用 clearfix 解决父元素高度塌陷
用 box-sizing: border-box 让宽度计算更直观

/* 全局设置：让 padding 和 border 不撑大容器 */
* {
    box-sizing: border-box;
}

box-sizing: border-box 是布局的基础。不设这个，加了 padding 就会超出宽度导致换行。

两栏布局

两栏布局是最常见的布局，一栏窄一栏宽。

左窄右宽

.sidebar {
    float: left;
    width: 25%;
    padding: 15px;
}

.main {
    float: left;
    width: 75%;
    padding: 15px;
}

<div class="container clearfix">
    <div class="sidebar">侧边栏</div>
    <div class="main">主内容区</div>
</div>

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

左宽右窄

.main {
    float: left;
    width: 70%;
}
.sidebar {
    float: left;
    width: 30%;
}

两栏宽度之和必须等于 100%，否则会换行或留空隙。

三栏布局

三栏布局中间是主内容，两侧是侧边栏。

.column {
    float: left;
    padding: 15px;
}

.column.side {
    width: 25%;
}

.column.middle {
    width: 50%;
}

<div class="container clearfix">
    <div class="column side">左侧栏</div>
    <div class="column middle">中间主内容</div>
    <div class="column side">右侧栏</div>
</div>

水平导航菜单

用 float 把列表项横向排列，是最经典的导航菜单做法。

.nav {
    list-style: none;     /* 去掉列表符号 */
    margin: 0;
    padding: 0;
    overflow: hidden;     /* 清除浮动 */
    background: #333;
}

.nav li {
    float: left;          /* 横向排列 */
}

.nav li a {
    display: block;       /* 让整块区域可点击 */
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}

.nav li a:hover {
    background: #555;
}

<ul class="nav">
    <li><a href="#">首页</a></li>
    <li><a href="#">新闻</a></li>
    <li><a href="#">关于</a></li>
    <li><a href="#">联系</a></li>
</ul>

导航项的 a 标签要设 display: block，否则 padding 在行内元素上表现不一致。

完整页面布局

把页眉、导航、内容区、页脚组合起来，就是一个完整的页面框架。

* {
    box-sizing: border-box;
}

/* 页眉 */
.header {
    background: #f1f1f1;
    padding: 20px;
    text-align: center;
}

/* 导航 */
.nav {
    overflow: hidden;
    background: #333;
}

.nav a {
    float: left;
    display: block;
    color: white;
    padding: 14px 16px;
    text-decoration: none;
}

.nav a:hover {
    background: #555;
}

/* 三列 */
.column {
    float: left;
    padding: 15px;
}

.column.side {
    width: 25%;
}

.column.middle {
    width: 50%;
}

/* 清除浮动 */
.row::after {
    content: "";
    display: table;
    clear: both;
}

/* 页脚 */
.footer {
    background: #f1f1f1;
    padding: 10px;
    text-align: center;
}

<div class="header">
    <h1>网站标题</h1>
</div>

<div class="nav">
    <a href="#">首页</a>
    <a href="#">关于</a>
    <a href="#">联系</a>
</div>

<div class="row">
    <div class="column side">
        <h3>左侧栏</h3>
        <p>侧边栏内容</p>
    </div>
    <div class="column middle">
        <h2>主内容</h2>
        <p>这里是页面的主要内容区域。</p>
    </div>
    <div class="column side">
        <h3>右侧栏</h3>
        <p>侧边栏内容</p>
    </div>
</div>

<div class="footer">
    <p>页脚信息</p>
</div>

响应式适配

传统布局也可以做响应式，用媒体查询在小屏幕下让列堆叠。

/* 默认：三列并排 */
.column {
    float: left;
    width: 33.33%;
}

/* 小屏幕：列堆叠 */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}

/* 导航在小屏幕下也堆叠 */
@media screen and (max-width: 600px) {
    .nav a {
        float: none;
        width: 100%;
        text-align: center;
    }
}

媒体查询是响应式的基础。max-width: 600px 表示屏幕宽度小于等于 600px 时生效。

传统布局的局限

浮动布局虽然经典，但有一些天然缺陷：

高度不一致：浮动元素高度不同时，排列会错位
垂直居中困难：传统方式很难实现垂直居中
代码冗余：需要 clearfix、box-sizing 等额外处理
顺序固定：HTML 顺序决定了显示顺序，难以调整

/* 高度不一致导致的问题 */
.box {
    float: left;
    width: 33.33%;
    /* 高度由内容决定，参差不齐 */
}

现代项目推荐用 Flexbox 或 Grid 做布局，它们解决了浮动布局的诸多痛点。

inline-block 替代方案

除了 float，还可以用 inline-block 实现横向排列。

.column {
    display: inline-block;
    width: 30%;
    vertical-align: top;    /* 顶部对齐 */
}

inline-block 的优点：

不需要清除浮动
元素高度自然撑开父元素
可以用 vertical-align 控制垂直对齐

缺点：

元素之间会有空白间隙（HTML 换行导致）
需要处理间隙问题

/* 消除 inline-block 间隙 */
.container {
    font-size: 0;           /* 父级设0 */
}

.column {
    display: inline-block;
    width: 30%;
    font-size: 16px;        /* 子级恢复 */
}

传统布局是理解 CSS 布局体系的基础。虽然现代项目多用 Flexbox 和 Grid，但掌握浮动布局能帮你更好地理解 CSS 的演进。

小结

传统布局主要依赖 float 和 position
两栏/三栏布局用 float + width 实现，宽度之和要等于 100%
box-sizing: border-box 让宽度计算更直观，是布局的基础
clearfix 解决父元素高度塌陷，伪元素法最推荐
媒体查询实现响应式，max-width 判断小屏幕
inline-block 可替代 float，但需要处理元素间隙