这是我参与更文挑战的第**14**天，活动详情查看：[更文挑战](https://juejin.cn/post/6967194882926444557) > 作为三列布局，圣杯和双飞翼布局是最常见的布局了，接下来我们一步一步来实现。 ## 一、圣杯布局与双飞翼布局首先我们需要知道两种布局的需求是什么。 **需求都是实现如下的三列布局**，（重点！！） **1、两侧内容宽度固定，中间内容宽度自适应** **2、三栏布局，中间一栏最先加载、渲染出来** 即便布局类似，二者还是有本质上的区别： ![bc3f708877a9dfb098365204d70f5e7.jpg](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f84d298c0bfa42c5bd47ed416070cd1b~tplv-k3u1fbpfcp-watermark.image) 可以看到，圣杯布局和双飞翼布局最不同的点就是**中间栏的区域不同**。空口说也说不出个一二三，直接看实现过程👇 ## 二、圣杯布局的实现过程首先写一下基本的html： ```html

middle

left

right

``` 这里注意要将middle即中间区域放在左边和右边前面，因为我们的需求是中间一栏最先加载、渲染出来，根据执行顺序所以把middle放在第一个。然后写一下基本的CSS，加上背景颜色和宽高方便查看： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/71d2473922b64385a64fb210047bb1b5~tplv-k3u1fbpfcp-watermark.image) 基本的布局搭好之后，我们只需要将**中间三个实现成我们需要的三栏布局**就好了。首先设置一下左右两栏的宽度，中间栏由于是自适应，所以宽度设置成**100%**。 ```css .middle { width: 100%; } .left { width: 100px; } .right { width: 100px; } ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/278740e7b03145eb8d5aa91a1a875eb1~tplv-k3u1fbpfcp-watermark.image) 然后就到了重点，我们需要在每一栏加上**浮动向左**，因为我们需要他们显示在同一行，但是这样会带来一个问题就是**高度塌陷**。如图： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8ea7a7603a74f9d8b59afdbb8ec49bd~tplv-k3u1fbpfcp-watermark.image) 此时我们有两种解决方案， 1、第一个就是在内容区域也就是三栏布局设置`overflow:hidden`，触发**BFC**撑开区域。 ```css .content { overflow: hidden; } ``` 解决如下： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6e4981a53973439991dfb727aea78c3f~tplv-k3u1fbpfcp-watermark.image) 2、第二个方法就是在底部footer区域**清除浮动**，解决高度塌陷： ```css .footer { clear: both; } ``` 同样也能解决👇 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/206cacbd12454fd8b07deb90559a99cb~tplv-k3u1fbpfcp-watermark.image) 解决完高度塌陷的问题，我们就需要想办法**把左边的盒子移动上去**。首先设置middle栏的`padding`,让中间这一栏左右留出区域方便我们放进去。 ```css .wrapper { padding-left: 100px; padding-right: 100px; } ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5632c192fd0a4dc5a4b0014f1259f293~tplv-k3u1fbpfcp-watermark.image) 此时我们其实只需要通过**相对定位**，**他们现在可以看成是一行放不下挤成了2行，所以左边这个盒子只需要往左边移动到相应位置，那么需要移动多少？** ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/627b5b1f99cd45b59c8a69f04c011668~tplv-k3u1fbpfcp-watermark.image) 通过这个图我们可以看到只需要移动**middle的宽度+右边留出来的100px**。即👇 ```css position: relative; margin-left: -100%; right: 100px; ``` 通过这三行代码，分两步，**向左偏移100%**，并且**再偏移一个100px**,我们就将左边这个盒子挪到了middle左边了。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/44d773ee20ef43fe970182fbbbf06e7d~tplv-k3u1fbpfcp-watermark.image) 接下来就是右边这栏，同理，我们只需要挪动盒子的宽度100px即可。 ```css margin-right: -100px; ``` ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/422d5547104f4b0ab066d5036f136bde~tplv-k3u1fbpfcp-watermark.image) **至此，我们可以说已经基本上完成了圣杯布局，我们可以通过拉伸或缩小窗口验证是否为我们想要的效果。** **优化：** ![圣杯布局优化前.gif](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4676e97aeb4249d5b4d4115072ac16b9~tplv-k3u1fbpfcp-watermark.image) 我们可以看到中间这栏是实现了自适应，但是还有一点小缺陷，就是当窗口过小的时候布局会受到影响。只需要**在body上设置最小宽度即可**。 ```css body { /* 设置最小宽度，防止挤压使中间内容消失 */ min-width: 600px; } ``` 这样一个简单的圣杯布局就完成啦。总结一下，**圣杯布局就是将基本布局之后使用向左浮动，middle栏留出两边位置，然后使用相对定位将左右两栏通过`margin-left`定位到相应位置。（是不是很简单！)** ## 三、双飞翼布局的实现过程我们再来看看双飞翼布局的实现，首先也是写一下基本的html： ```html

middle

left

right

``` 样式上也是需要向左浮动，前面的基本一致，现在的效果如下👇 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b9633614e16c4509843210225557b456~tplv-k3u1fbpfcp-watermark.image) 然后不一样的是，我们不使用相对定位，而是直接通过`margin-left`，将left栏移动到middle栏上，right栏也一样。 ```css .left { margin-left: -100%; } .right { margin-left: -100px; } ``` 效果已经是三栏布局了，但是注意看此时的middle的内容被左右两栏遮住了（即**看不到middle文本了**） ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/91f5e94347744dc3938e490c087cc4b7~tplv-k3u1fbpfcp-watermark.image) 因为左右两栏覆盖了middle栏的内容。此时应该可以想到，只要将middle栏设置padding即可将内容挤到中间可视区域了。 **这里有个问题就是**，如果直接在middle栏里面加padding,会导致整个布局乱套。所以我们需要在middle栏里面再套一层div，那么现在的html就会变成这样： ```html

middle

left

right

``` 我们在里面这层div上加padding,即👇 ```css .main #main-wrapper { padding-left: 100px; padding-right: 100px; } ``` 至此，我们就实现了双飞翼布局： ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6f91d9750ced4aefa2ec5d61118a0940~tplv-k3u1fbpfcp-watermark.image) ![双飞翼布局优化后.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6edaa8e238104a80ae9fffdc0f644bbd~tplv-k3u1fbpfcp-watermark.image) ## 四、总结最后总结一下，二者的异同。 ### 1、相同之处（1）布局类似，都是实现特定需求的三列布局。（2）都使用了`float`浮动向左脱离文档流,让左中右三列浮动，通过父外边距形成三列布局。 ### 2、不同之处 **（1）实现方法的不同：** **圣杯布局**是通过`float`搭建布局+`margin`使三列布局到一行上+`relative`相对定位调整位置。 **双飞翼布局**是通过`float`+`margin`，**没有使用相对定位**。 **（2）怎么处理两列的位置：** **圣杯布局**是给外部容器加`padding`，通过相对定位把两边定位出来。 **双飞翼布局**是靠在中间这层外面套一层`div`加`padding`将内容挤出来中间。 **以上即是我对圣杯布局和双飞翼布局的实现过程和总结，如有错误，欢迎指出~~** [圣杯布局demo源码](https://github.com/nankou/study_process/blob/main/CSS_study/%E5%9C%A3%E6%9D%AF%E5%B8%83%E5%B1%80.html) [双飞翼布局demo源码](https://github.com/nankou/study_process/blob/main/CSS_study/%E5%8F%8C%E9%A3%9E%E7%BF%BC%E5%B8%83%E5%B1%80.html)