CSS经典三栏布局方案（6种方法）

时间：2017-12-05

本文介绍了CSS经典三栏布局方案，分享给大家，也给自己做个笔记，具体如下：

三栏布局，顾名思义就是两边固定，中间自适应。三栏布局在开发十分常见

1. float布局

最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏：

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    </style>
      
      <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
      </div>

此时可以得到左右两栏分布：

CSS经典三栏布局方案（6种方法）

接下来再来看中间栏如何处理。我们知道对于float元素，其会脱离文档流，其他盒子也会无视这个元素。（但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。）所以此时只需在container容器内添加一个正常的div，其会无视left和right，撑满整个container，只需再加上margin为left right流出空间即可：

   <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        margin-left: 120px;
        margin-right: 120px;
      }
    
      .container {
        border: 1px solid black;
      }
    
      <div class="container">
      <div class="left"></div>
      <div class="right"></div>
      <div class="main"></div>
      </div>

CSS经典三栏布局方案（6种方法）

优势：简单

劣势：中间部分最后加载，内容较多时影响体验

2. BFC 规则

BFC(块格式化上下文)规则规定：BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可：

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        overflow: hidden;
      }
    
      <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
      </div>

3. 圣杯布局

圣杯布局的核心是左、中、右三栏都通过float进行浮动，然后通过负值margin进行调整。

第一步，先来看下基本布局

    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }

        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: blue;
        }
    </style>
    <body>
        <div class="container">
            <div class="main"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>

CSS经典三栏布局方案（6种方法）

此时看到的效果是：左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中：

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            background-color: yellow;
        }

共3页:

上一篇1/3

上一篇：浅谈css3中calc在less编译时被计算的解决办法 下一篇：浅谈css3新单位vw、vh、vmin、vmax的使用详解

CSS经典三栏布局方案（6种方法）

相关文章

最新文章