圣杯布局和双飞翼布局

圣杯布局和双飞翼布局都是为了实现一个三列布局，其中左侧和右侧的部分宽度固定，中间部分宽度随浏览器宽度的变化而自适应变化。自然而然地会想到position:relative，float和flex。

1. 这里用的是float
   （1）写出html代码，设置基本css属性

<div class="middle">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veritatis quis repellendus, veniam error unde a. Consequuntur possimus quia, maxime consequatur iure, ea quisquam saepe, vel esse voluptatibus nobis provident.
</div>
<div class="left">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nesciunt quam aut illo labore eligendi, ea dolorum laborum asperiores doloribus, omnis quos accusantium assumenda fuga alias perspiciatis atque incidunt? Libero!	
</div>
<div class="right">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquam, illum nulla labore nihil! Sequi distinctio fugit facilis, officiis suscipit, omnis natus itaque quaerat repellendus maxime porro nobis? Facere, officia.
</div>

.left, .right, .middle {
	float: left;
	height: 400px;
}
.middle {
	background: yellow;
}
.left {
	width: 250px;
	background: red;
}
.right {
	width: 200px;
	background: blue;
}

则显示效果如下图

（2）那现在需要做的就是将红色的left和蓝色的right分别移到黄色middle的左边和右边。这里使用负margin来实现。
负margin在MDN中的解释：

The margin-left CSS property sets the margin area on the left of an element. A positive value places it farther from its neighbors, while a negative value places it closer.

也就是说，负margin会使得自身的块和隔壁的块离得更近。如果设置left块的margin-left为负，则它会离前面的middle块更近。近到一定程度会移到上一行，设置为-100%则left块会到middle块的最左边。right块同理。（注意，这样情况发生的前提是两者都形成BFC）

添加代码如下

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

（3）我们会发现已经定位已经基本写好了，只是middle块的文字被两边挡住了。有两种解决方法：设置两边为margin（双飞翼）和设置中间middle块的padding（圣杯）。
双飞翼布局：加一个container，设置container的padding。但这会造成三列布局的整个外层都被加上了padding，可以通过position: relative移动left和right。
圣杯布局：可以选择直接给middle块加padding，但这样会影响它本身的格式，所以在middle里再加一个小的div，设置它的padding。
最终实现效果：

以上，就是双飞翼和圣杯布局的写法。
第一步，float，设置基本属性。
第二步，用负margin将left和middle移到middle两边。
第三步，处理被挡住的middle文字。

附：
双飞翼布局完整代码：

<div class="container">
	<div class="middle">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veritatis quis repellendus, veniam error unde a. Consequuntur possimus quia, maxime consequatur iure, ea quisquam saepe, vel esse voluptatibus nobis provident.
	</div>
	<div class="left">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nesciunt quam aut illo labore eligendi, ea dolorum laborum asperiores doloribus, omnis quos accusantium assumenda fuga alias perspiciatis atque incidunt? Libero!	
	</div>
	<div class="right">
		Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquam, illum nulla labore nihil! Sequi distinctio fugit facilis, officiis suscipit, omnis natus itaque quaerat repellendus maxime porro nobis? Facere, officia.
	</div>
</div>

.container {
	padding: 0 200px 0 250px;
	height: 400px;
}
.left, .right, .middle {
	float: left;
	height: 400px;
}
.middle {
	background: yellow;
}
.left {
	position: relative;
	left: -250px;
	margin-left: -100%;
	width: 250px;
	background: red;
}
.right {
	position: relative;
	right: -200px;
	margin-left: -200px;
	width: 200px;
	background: blue;
}

圣杯布局完整代码：

<div class="middle">
	<div class="main">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab veritatis quis repellendus, veniam error unde a. Consequuntur possimus quia, maxime consequatur iure, ea quisquam saepe, vel esse voluptatibus nobis provident.
	</div>
</div>
<div class="left">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem nesciunt quam aut illo labore eligendi, ea dolorum laborum asperiores doloribus, omnis quos accusantium assumenda fuga alias perspiciatis atque incidunt? Libero!	
</div>
<div class="right">
	Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa aliquam, illum nulla labore nihil! Sequi distinctio fugit facilis, officiis suscipit, omnis natus itaque quaerat repellendus maxime porro nobis? Facere, officia.
</div>

.left, .right, .middle {
	float: left;
	height: 400px;
}
.left {
	margin-left: -100%;
	width: 250px;
	background: red;
}
.right {
	margin-left: -200px;
	width: 200px;
	background: blue;
}
.middle {
	background: yellow;
}
.main {
	margin: 0 200px 0 250px;
}