圣杯布局和双飞翼布局

圣杯布局和双飞翼布局

这种经典三列布局在网页布局中非常常见，主要区域分为三栏，左右固定，中间自适应，而且在页面渲染的时候，尽可能优先渲染中间主要部分。关于这种布局，最早产生于西方，后来传到中国，扩展成了双飞翼布局。

布局的重点有两点：

1. 左右栏固定，中间栏自适应。
2. 优先渲染中间栏部分。

圣杯布局

1. html结构

<div class="container">
    <div class="main">
        main
    div>
    <div class="left">
        left
    div>
    <div class="right">
        right
    div>
div>

html渲染是从上到下的，所以要保证main被优先渲染，就需要将main的位置放到前面。

2. CSS结构分析

1. 基本样式

   .container{
   	background-color: #ccc;
   }
   .main,.left,.right{
   	min-height: 200px;
   }
   .main{
       width: 100%;
       background-color: red;
   }
   .left{
       width: 100px;
       background-color: blue;
   }
   .right{
       width: 150px;
       background-color: green;
   }

   

2. 可以看到，标准流布局之后是这样从上而下的样子，使用浮动来让盒子脱离标准流

   .main,.left,.right{
   	float: left;
   }
   .container{
       /*清除浮动带来的高度塌陷*/
       overflow:hidden;
   }

   
   效果，是由三行变成了两行，原因是一行放不下，因为main的宽度是父容器的100%.

3. 使用margin-left将左右盒子拉至应该在的位置，注意：margin值的百分比是相对父容器的百分比，所以我们让左盒子的margin-left: -100%; 右盒子的margin-left: -右盒子的宽度即可

   .left{
       margin-left: -100%;
   }
   .right{
       margin-left: -150px;
   }

   

   可以看到，左右栏已经拉到了指定位置，但是有一个问题，就是遮挡住了中间栏main里面的内容。

4. 给父容器设置padding值来让main的宽度值变小，给左右栏留出足够的位置

   .container{
       padding: 0 150px 0 100px;
   }

   效果如下：
   
   使用padding后，因为父容器没有设置宽度，所以内容区域width变小了，main的宽度就小了，两边留出了足够的位置，但是浮动不能越过父容器的padding区域，所以我们还需要用相对位置来移动左右栏的位置。

   .left,.right{
       position: relative;
   }
   .left{
       left: -100px;
   }
   .right{
       right: -150px;
   }

   最终效果如下：

   

5. 合并CSS代码后如下：

   .container{
       background-color: #ccc;
       overflow:hidden;
       padding: 0 150px 0 100px;
   }
   .main,.left,.right{
       min-height: 200px;
       float: left;
       position: relative;
   }
   .main{
       width: 100%;
       background-color: red;
   
   }
   .left{
       width: 100px;
       background-color: blue;
       margin-left: -100%;
       left: -100px;
   }
   .right{
       width: 150px;
       background-color: green;
       margin-left: -150px;
       right: -150px;
   }

3. 问题

以上代码就是标准的圣杯布局的原理，但是代码有点啰嗦，而且在浏览器窗口变窄到一定程度之后就会有问题，如下图：

可以看到，布局全都乱掉了，原因是：因为左右盒子设置了相对定位，所以当左右盒子应该在的位置发生重叠时，一行放不下了，就会换行，造成布局混乱，有两种解决办法：

1. 给父容器设置最小宽度，这个最小宽度的计算为：left盒子宽度*2 + right盒子宽度
2. 使用双飞翼布局

双飞翼布局

主要是不同是给中间部分在套上一层容器，这样做以后，大的容器就不再需要设置padding值，左右栏盒子也不用再设置相对布局，代码精简了很多，而且不会出现上面变的特别窄布局会乱掉的问题。

1. html结构

<div class="container">
    <div class="main">
        <div class="main-content">
        	main
        div>
    div>
    <div class="left">
    	left
    div>
    <div class="right">
    	right
    div>
div>

2. CSS结构

.container{
	overflow: hidden;
}
.main,.left,.right{
    min-height: 200px;
    float: left;
}
.main{
    background-color: red;
    width: 100%;
    min-height: 220px;
}
.left{
    width: 100px;
    background-color: blue;
    margin-left: -100%;
}
.right{
    width: 150px;
    background-color: green;
    margin-left: -150px;
}
.main-content{
    background-color: yellow;
    margin: 0 150px 0 100px;
    height: 200px;
}

效果如下：
在这里插入图片描述

3. 其他方案

这种布局除了这种典型的三栏布局，还可以引申至2栏，其他的等等。另外，实现布局的方式也是多种做样，还可以使用弹性布局flex或栅格布局grid来实现，但是兼容性没有这种以上两种方式好。

这边为了解决高度塌陷问题采取的办法不是最好的，因为设置的了父容器的overflow:hidden;如果后面有元素需要使用定位，用负值的margin时，就不能显示了。所以我们改进一下：

.clearfix:after{/*触发BFC*/
    content: "";
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
}
.clearfix{
    /*触发 hasLayout */
    zoom: 1;/*处理ie6的hack*/
}

然后给父容器加上这个类

4. 注意

上面所有样式中的有关高度height和min-height都是为了展示效果加上的，实际中是子元素自动撑高的。