圣杯和双飞翼布局

圣杯布局：

原理：给包裹层设置左右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;}

转载于:https://www.cnblogs.com/helloMySir/p/8413798.html