css实现三栏自适应布局（两边固定，中间自适应）以及优缺点

方法一：绝对定位（absolute + margin）

原理：给左右两边的元素设置absolute，这样左右两边的元素脱离标准文档流的控制，中间的元素自然会上来，然后给中间的元素设置margin留出左右两边元素的位置，也就是说margin-left = “左边元素的宽度”  margin-right = "右边元素的宽度"

优点：三个div的顺序是任意的

缺点：要对样式进行初始化，否则元素间会出现空隙，因为使用了absolute，如果页面还有其他内容处理时要小心！

注：随着浏览器窗口缩小，会发生压缩，左右元素重叠

代码：

<style>
        *{
            padding: 0;
            margin: 0;
        }
        .left,.right{
            width: 200px;
            height: 200px;
            position: absolute;
        }
        .left{
            background-color: green;
            left: 0;
        }
        .right{
            background-color: blue;
            right: 0;
        }
        .center{
            height: 200px;
            margin-left: 200px;
            margin-right: 200px;
            background-color: red;
        }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

效果：

方法二：自身浮动（float）

原理：给左右元素分别设置左浮动和右浮动，这样左右元素就脱离了标准文档流的控制， 但中间的元素还在标准文档流中，之后给中间的元素设置margin，设置方法同方法一

优点：受外界因素影响小

缺点：三个div的顺序有固定性，因为中间的元素任然在文档流中，所以要放在最后面，左右元素顺序不固定，这也是与绝对定位不同的地方

注：随着浏览器窗口缩小，右边元素会被挤到下一行

代码：

 <style>
        .left,.right{
            width: 200px;
            height: 200px;
        }
        .left{
            background-color: green;
            float: left;
        }
        .right{
            background-color: blue;
            float: right;
        }
        .center{
            height: 200px;
            margin-left: 200px;
            margin-right: 200px;
            background-color: red;
        }
</style>
<body>
    <div class="left">left</div>
    <div class="right">right</div>
    <div class="center">center</div>
</body>

效果：

方法三：圣杯布局（BFC+负margin）

原理：使用margin负值法，使用圣杯布局首先需要将中间元素用div包住，设置float使其形成一个BFC，并且要设置宽度，整个宽度和左边元素的margin负值要相互配合，也就是margin-left = "-中间元素外层div宽度" ，右边元素的margin负值要和它自己的宽度配合，也就是margin-left = “-右边元素宽度”

优点：三栏有相互关联性，有抗性

缺点：三个元素的顺序也是固定的，中间元素要放置在最前面，左右元素顺序不固定，并且左元素的margin-left = "中间元素外层div宽度"

注：随着浏览器窗口缩小，会发生压缩，左右元素重叠，继续缩小之后右边元素会又会被挤到下一行，但是同方法二有不同

代码：

<style>
        .wrap{
            width: 100%;
            float: left;
        }
        .left,.right{
            width: 200px;
            height: 200px;
        }
        .left{
            background-color: green;
            float: left;
            margin-left: -100%;
        }
        .right{
            background-color: blue;
            float: left;
            margin-left: -200px;
        }
        .center{
            height: 200px;
            background-color: red;
        }
</style>
<body>
    <div class="wrap">
        <div class="center">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>

效果：

方法四：flex布局

原理：将左中右三个元素用div包裹起来，给外层div设置display:flex，之后给中间元素设置flex:1

优点：解决了之前方式带来的问题，例如浮动

缺点：三个元素的顺序也是固定的，中间元素要放在中间，不能兼容IE8及以下浏览器。

注：随着浏览器窗口的缩小，会发生压缩，但是不会重叠和换行

代码：

<style>
        .wrap{
            width: 100%;
            display: flex;
        }
        .left,.right{
            width: 200px;
            height: 200px;
        }
        .left{
            background-color: green;
        }
        .right{
            background-color: blue;
        }
        .center{
            flex: 1;
            height: 200px;
            background-color: red;
        }
</style>
<div class="wrap">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
</div>

效果：

注：其实还有网格布局和表格布局