在面试中我们经常会被问到一个简单的问题，那就是"实现一个三栏布局，左右固定，中间自适应"。这个问题就是考察知识点就是页面布局，我们是实际的项目开发中，也经常会遇到这个问题。其实我发现一个前端开发人员有一个通病，包括我自己也是，"觉得CSS不是很重要，不需要深入的学习"，这其实是一个比较糟心的想法。在项目中经常出现错乱的布局，但是并不知道原因。所以我们今天来简单总结一下有那些方式可以实现三栏布局。

一、浮动布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="right">3</div>    
        <div class="content">2</div>
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box > div {
        min-height: 100px;
    }
    .left {
        float: left;
        width: 100px;
        background: red;
    }
    .content {
        background: yellow;
    }
    .right {
        float: right;
        width: 100px;
        background: blue;
    }
</style>

这种布局方式是利用浮动脱离文档流实现的，这里需要特别注意一下，left、right都在content前面布局，如果按照正常的顺序left-content-right，中间元素形成定位，那么就会将right顶下去。无法实现三栏布局。

浮动元素特征：脱离文档流，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性。也就是说，如果一个父盒子中有两个子元素，其中一个子元素浮动，若另一个元素为块级元素，则会无视浮动元素，被浮动元素覆盖；若另一个元素为内联元素，则会环绕浮动元素。

优点：兼容性好。

缺点：元素脱离文档流，产生浮动。

二、定位布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box {
        position: relative;
    }
    .box > div {
        min-height: 100px;
        position: absolute;
    }
    .left {
        left: 0px;
        width: 100px;
        background: red;
    }
    .content {
        left: 100px;
        right: 100px;
        background: yellow;
    }
    .right {
        right: 0px;
        width: 100px;
        background: blue;
    }
</style>

优点：简单，适合快速开发页面。

缺点：元素脱离文档流，导致后面的元素也会脱离文档流，可使用性比较差。

三、flex布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box {
        display: flex;
    }
    .box > div {
        min-height: 100px;
    }
    .left {
        width: 100px;
        background: red;
    }
    .content {
        flex: 1;
        background: yellow;
    }
    .right {
        width: 100px;
        background: blue;
    }
</style>

优点：开发简单易上手。

缺点：这在移动端开发非常常见，但PC端IE8不兼容。

四、table布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box {
        display: table;
        width: 100%; 
        min-height: 100px;
    }
    .box > div {
        display: table-cell;
    }
    .left {
        width: 100px;
        background: red;
    }
    .content {
        background: yellow;
    }
    .right {
        width: 100px;
        background: blue;
    }
</style>

优点：兼容性好。

缺点：曾经风靡一时，但是现在基本被放弃了。

五、gird布局

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box {
        display: grid;
        grid-template-columns: 100px 1fr 100px;
    }
    .box > div {
        min-height: 100px;
    }
    .left {
        background: red;
    }
    .content {
        background: yellow;
    }
    .right {
        background: blue;
    }
</style>

优点：简单。两行关键代码搞定。

缺点：兼容性差。

六、浮动布局第二种方式。

<template>
    <div class="box">
        <div class="left">1</div>
        <div class="content">2</div>
        <div class="right">3</div>    
    </div>
</template>
<style type="text/css">
    * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    .box > div {
        min-height: 100px;
    }
    .left {
        float: left;
        width: 100px;
        background: red;
        position: relative;
        z-index: 9999;
    }
    .content {
        float: left;
        width: 100%;
        margin-left: -100px;
        background: yellow;
        padding: 0 100px;
        /* z-index: 1; */
        position: relative;
    }
    .right {
        float: left;
        width: 100px;
        margin-left: -100px;
        background: blue;
        z-index: 1;
        position: relative;
    }
</style>

优点：黑科技。

缺点：代码太多了，记不住呀。