面试官：怎样实现左右元素固定，中间元素自适应的三栏布局？总结8种~

常见的布局方式有: 浮动布局、Position定位、弹性(flex)布局、table布局、网格(grid)布局。

前提是左右宽度(假如左右宽度为100px),整个高度已知(假如高度为500px)，中间宽度自适应。

1.浮动布局

---

float的实际初衷

仅仅使为了实现文字环绕问题。

float的感性认知：

1. 包裹性：
   1. 收缩：元素应用了float后，宽度收缩，紧紧地包裹住内容（即元素的宽度收缩到元素内的内容的宽度大小
   2. 坚挺：原来没有高度，但元素应用了float后，元素的高度突然扩展到内容的高度大小
   3. 隔绝：元素应用了float后，盒子里面的内容发生了任何事情，都与盒子外的内容无关（BFC）
2. 破坏性:
   1. 子元素应用了float后，父容器塌陷：父容器的高度变为0

实现过程

左右两个元素使用float浮动使左右两个元素脱离文档流，中间元素使用margin根据左右元素设置左右边距。

浮动布局的优缺点

浮动布局是由局限性的，浮动元素是要脱离文档流，要注意做清除浮动，这个处理不好的话，会带来很多问题，比如高度塌陷。 
浮动布局的优点就是比较简单，兼容性也比较好。只要清除浮动做的好，是没有什么问题的。

代码块 

.left{
    position: absolute;
    left: 0;
    width: 300px;
    background-color: red;
}
.middle{
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: blue;
}
.right{
    position: absolute;
    right: 0;
    width: 300px;
    background-color: #3A2CAC;
}

   <div id="left"></div>
   <div id="right"></div>
   <div id="middle"></div>

 

2.position定位

---

position定位的优缺点

绝对定位布局很快捷，设置很方便，而且也不容易出问题，但是它的子元素也是脱