聖盃和雙飛翼佈局

聖盃佈局：

原理：給包裹層設置左右padding值空出left和right的位置，使用負邊距，左邊margin-left：-100%，右邊margin-left：-100px；此時左右兩個盒子位於主盒子兩側可是會遮擋住主盒子的內容，因此再給左盒子position：relative，left：-100px，右盒子position：relative；right：-100px，使左右兩個盒子定位正確。

/*html部分*/

<div class="container">

<div class="main">main</div>

<div class="left">left</div>

<div class="right">right</div>

<div>

/*css部分*/

.container{padding：0 100px 0 100px;}

.main{ float: left;width:100%;}

.left{float:left;width:100px;margin-left:-100%;position:relative;left:-100px}

.right{float:left;width:100px;margin-left:-100px;position:relative;right:-100px}

雙飛翼佈局：

原理和聖盃佈局有點像都是使用margin負邊距達到目的，不一樣的是雙飛翼佈局將主盒子外包裝一層div，使用主盒子的左右外邊距解決主盒子被遮擋的問題。

/*html部分*/

<div class="container">

<div class="main-wrap">

<div class="main"></div>

</div>

<div class="left"></div>

<div class="right"></div>

</div>

/*css部分*/

.main-wrap{width:100%;float:left}

.main{margin:0 100px 0 100px;}

.left{float:left;margin-left:-100%;width:100px;}

.right{float:left;margin-left:-100px;width:100px;}