前端之三列布局

        在前端开发中，三列布局是很基础的一种场景，这篇文章就总结一下实现三列布局的方法及优缺点，还有一些和三列布局相关的布局方式。

        三列布局的要求一般为：

              1、左右两边宽度固定，中间宽度自适应。

              2、中间列的内容可以完整显示。

      这种情况用定位和浮动都可以实现。

        1、使用定位，使用定位主要是将左右两列通过绝对定位的偏移量定位到左右两边的位置。

#middle{background: deeppink;padding: 0 200px; //这一句一定要加，不然中间列的内容有一部分会被左边的列遮住
 }
 #left{position: absolute;left: 0;top: 0;
  width: 200px;background: pink;
 }
 #right{position: absolute;right: 0;top: 0;
  width: 200px;background: pink;
 }

效果：

 2、使用浮动，这种情况不用给中间列设置padding，内容就可以完全显示。因为浮动只提升半级层级，当左右两边的元素都浮动起来时，下面的元素会顶上去，由于只提升了半层，所以只有下面元