圣杯布局、双飞翼布局

先看看效果图，更直观去理解这种布局



这种布局就是三列布局（中间自适应，两侧固定宽度），所谓的圣杯布局和双飞翼布局，就是实现这种布局的不同方法。

这种布局的优点是：中间main区域先渲染，然后在渲染left，最后是right，这样更符合开发中，重要的内容先渲染，次要的内容放在两侧，后渲染。

双飞翼布局

html

<div class="container">
<div class="main">
<div class="main-con">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>

css

*{
margin: 0;
padding: 0;
}
.container{
width: 100%;
height: 200px;
overflow: hidden;
}
.main{
width: 100%;
height: 100px;
float: left;
background-color: red;
}
.main-con{
height: 200px;
margin: 0 200px;
}
.left{
width: 200px;
height: 200px;
float: left;
margin-left: -100%;
background-color: green;
}
.right{
width: 200px;
height: 200px;
float: left;
background-color: blue;
margin-left: -200px;
}

改布主要用到了，margin负边距，浮动

应用main-con模块是为了让内容归为，不然的内容就在left区域，

圣杯布局

html

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

css

*{
margin: 0;
padding: 0;
}
.container{
height: 200px;
padding: 0 200px;
}
.main{
width: 100%;
height: 100px;
float: left;
background-color: red;
}
.left{
width: 200px;
height: 200px;
float: left;
position: relative;
left: -200px;
margin-left: -100%;
background-color: green;
}
.right{
width: 200px;
height: 200px;
float: left;
position: relative;
right: -200px;
margin-left: -200px;
background-color: blue;
}

圣杯布局主要用到：padding， 浮动，position的负定位（归位）

总结：其实这布局技巧不难发现，

left模块，都应用了margin-left: -100%;

main模块，或用padding活用margin，都是为了给两侧留白，让left和right有位置去放

right模块，应用margin-left：-200px;（right宽度）;

值得一提的是，三个模块都用了浮动，所有最后尽量都把浮动一清除，我用overflow：hidden；