这个是布局代码

图片发自简书App

三列布局

1.浮动方法

使用浮动，将左右两列，通过浮动也就是float：left和float:right浮动到左右两边，然后在给中间的块上下margin设为0，左右设为两列的宽度即可，废话不多说，上代码。

图片发自简书App

2.定位的方法

使用定位，将左右两列，通绝对过定位也就是position:absolute并且将左边列的left:0,top:0右边列的right:0,top:0，这样左右两列就通过定位给定位到左右两边，然后在给中间的块上下margin设为0，左右设为两列的宽度即可，废话不多说，上代码。

图片发自简书App

最后就是重头戏了－－－圣杯布局

3.圣杯布局

圣杯布局是使用场景最多也是使用最广泛的一种三列布局方法，首先在三列的父级或者是上一级（通常我们是用一个div将三列包在一起，这里的父级指的就是这个div）设置清浮动，清浮动常用的是overflow:hidden,然后设置padding:0 100px(这里的100px是根据左右两列的宽度设置的是可以更改的)，然后中间列一定要设置宽度为百分百width100%,然后margin-right:－100px(这里的100px是根据左右两列的宽度设置的是可以更改的)还有就是每一列要等高既padding-bottom:10000px,margin-bottom:10000px,然后需要注意的是，右边一列需要设置相对定位position:relative,这里设置相对是因为元素在浮动以后需要启动BFC才能设置宽高，设置right-100px(这里的100px是根据左右两列的宽度设置的是可以更改的)，废话不多说上代码

图片发自简书App