CSS实现两边定宽，中间自适应（即三栏自适应布局）最全答案

主要分为两大类，一类是基于position传统的实现，一类是基于css3新特性弹性盒模型布局实现。

 

1 自身浮动法

原理：对左右分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

.left{
    float: left;
    width: 200px;
    height: 420px;
}
.right{
    float: right;
    padding: 0;
    width: 200px;
    height: 420px;
}
.center{
    margin: 0 220px 0 220px;
    height: 420px;
}

注意：

1. 中间栏是最后一个div，三栏在html中的书写顺序很重要。
2. 为了使父容器的长度自适应最长的子元素，只需将父容器的over-flow属性设置成hidden。
3.  

2 绝对定位法

原理：将左右两边使用absolute定位，因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后使用margin属性，留出左右元素的宽度，即可以使中间元素自适应屏幕宽度。

.left{
    position:absolute;
    left: 20px;
    width:200px;

}
.right{
    position:absolute;
    right: 20px;
    width:200px;

}
.center{
    margin:0 240px 0 240px; //20+200+任定空余

}

 该法布局的好处：三个div顺序可以任意改变。

不足：因为绝对定位，所以如果页面上还有其他内容，top的值需要小心处理，最好能够对css样式进行一个初始化，就像在上面例子中加了一个标题，如果不对样式进行初始化，则两边和中间的值会对不齐。

3 圣杯布局

原理：margin负值法。使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设置float属性使其形成一个BFC，并设置宽度，并且这个宽度要和left块的margin负值进行配合。

  .div{
            float: left;
            width: 100%;
            height: 300px;   

        }
  .center{
            height: 100%;
            margin: 0 210px 0 210px;  //中间和左右留10px间隙         
        }
  .left{
            float: left;
            height: 300px;
            width: 200px;
            margin-left: -100%;  //与div宽度一致
        }
 .right{
            float: left;
            height: 300px;
            width: 200px;
            margin-left: -200px;
        }

三个兄弟元素center，left，right全部使用左浮动，这样保证了可以紧跟着排列。然后div设置了100%width，表明了铺满了父元素所有宽度，自然而然的left和right就跳到了第二行，此时利用margin-left属性将left和right固定回去。

 该方法在网站布局中非常常见，也是面试常考点，优点是三栏相互关联，有一定的抗性。需要注意的是，布局中间部分一定要放在前面，左右顺序不限制。对于left块的margin负值一定要等于div的宽度。

4 弹性盒子

在外围包裹一层main，设置为display：flex；中间设置flex：1；但是盒模型默认紧紧挨着，可以使用margin控制外边距。

.main {          //把left，center，right包起来
    display: flex;
    justify-content: center;
    height: 300px;
  }

  .left {
    width: 200px;
    height: 100%;
  }

  .content {
    flex: 1;
  }

  .right {
    width: 300px;
    height: 100%;
  }