CSS 传统布局实战

前两篇讲了文档流、浮动和定位，这篇把它们组合起来，做几个完整的页面布局，看看传统布局的路数。

两栏布局

两栏布局是经典中的经典，左侧固定宽度，右侧占满剩余空间。思路是左侧浮动，右侧用 margin-left 把左侧的宽度让出来。

<style>
  .layout {
    overflow: hidden;    /* 顺手清浮动 */
  }
  .side {
    float: left;
    width: 220px;
    background: #ecf0f1;
  }
  .main {
    margin-left: 220px;    /* 让出左侧的 220px */
    background: #fff;
  }
</style>
<div class="layout">
  <aside class="side">侧边栏，固定 220px</aside>
  <main class="main">主体内容，自适应剩余宽度</main>
</div>

有个细节要注意，main 的 margin-left 必须和侧栏宽度保持一致，改了一边就要同步改另一边。

三栏布局

三栏布局是两边固定、中间自适应。浮动元素只能向左或向右贴，中间的自适应柱子放不下，只能让它最后出场，左右两栏先落位，中间再靠 margin 把两边空间让出来。这是双飞翼思路的简化版。

<style>
  .layout {
    overflow: hidden;
  }
  .left {
    float: left;
    width: 200px;
    background: #f39c12;
  }
  .right {
    float: right;
    width: 200px;
    background: #3498db;
  }
  .center {
    margin: 0 200px;    /* 左右各让出 200px */
    background: #fff;
  }
</style>
<div class="layout">
  <aside class="left">左栏</aside>
  <aside class="right">右栏</aside>
  <main class="center">中间自适应</main>
</div>

注意 HTML 里 center 必须写在最后，写在前面的话，左右两个浮动元素会分别挤到它下面去。center 的 margin 值也要跟着左右栏宽度走。

完整页面结构

把前两篇的知识都串起来，搭一个完整页面，页头、导航、主体加侧边栏、页脚。

<style>
  body {
    margin: 0;
    font-family: sans-serif;
  }
  .header {
    background: #2c3e50;
    color: #fff;
    padding: 20px;
    text-align: center;
  }
  .nav {
    background: #34495e;
    text-align: center;
  }
  .nav a {
    display: inline-block;
    color: #fff;
    padding: 10px 24px;
    text-decoration: none;
  }
  .wrap {
    overflow: hidden;    /* 清除浮动 */
  }
  .aside {
    float: left;
    width: 220px;
    padding: 20px;
    background: #ecf0f1;
  }
  .content {
    margin-left: 220px;
    padding: 20px;
  }
  .footer {
    background: #2c3e50;
    color: #fff;
    padding: 10px;
    text-align: center;
  }
</style>

<div class="header">我的博客</div>
<div class="nav">
  <a href="#">首页</a>
  <a href="#">教程</a>
  <a href="#">归档</a>
</div>
<div class="wrap">
  <aside class="aside">侧边栏，放目录和标签</aside>
  <main class="content">主体内容区，文章正文都放这里</main>
</div>
<div class="footer">页脚</div>

页面主干就搭完了，把侧栏的 width 换成百分比，还能做出响应式效果，这是后话。

浮动布局的局限性

练完上面三个例子，float 布局的毛病也攒了一堆。一是高度塌陷，每层容器都要想办法清浮动，二是顺序受限，中间自适应的内容只能放最后写，HTML 顺序和视觉顺序对不上，三是垂直居中很难，要绕到绝对定位加负 margin 这种怪招，四是改版成本高，改一处宽度要连带改好几处 margin。正因为这些痛点，Flexbox 和 Grid 才应运而生。

小结

传统布局的核心思路就两条，浮动排横排，margin 让空间。这套老手艺现在依然能见到，尤其是兼容老项目的场景。下一篇开始讲 Flexbox，学完你会觉得豁然开朗，浮动那些别扭的地方它基本都解决了。