双飞翼HTML圣杯布局 关于圣杯布局与双飞翼布局的理解

html>

圣杯布局

*{margin:0;

padding:0;}

body{width:100%;

margin:0auto;

height:800px;}

.middle,.left,.right{float:left;}

.head,.foot{background:pink;

height:100px;

text-align:center;

line-height:100px;

font-size:32px;

float:left;

width:100%}

.main{padding-left:300px;

padding-right:250px;}

.middle{background:red;

height:600px;

width:100%;}

.left{background:yellow;

width:300px;

height:600px;

margin-left:-100%;

position:relative;

left:-300px;}

.right{background:blue;

height:600px;

width:250px;

margin-left:-250px;

position:relative;

right:-250px;}

这是页面的头部这是页面主体的中间这是页面主体的左侧这是页面主体的右侧这是页面的尾部

html>

双飞翼布局

*{margin:0;

padding:0;}

body{width:100%;

margin:0auto;

height:800px;}

.head,.foot{width:100%;

float:left;

text-align:center;

line-height:100px;

height:100px;

background:pink;

font-size:32px;}

.main,.left,.right{float:left;

height:600px;}

.main{width:100%;}

.left{width:300px;

background:yellow;

margin-left:-100%;}

.right{background:blue;

width:250px;

margin-left:-250px;}

.main-continer{margin-left:300px;

margin-right:250px;

background:red;

height:600px;}

这是页面的头部这是页面主体中间部分的容器这是页面主体的左侧这是页面主体的右侧这是页面的尾部

可以这样理解吗

圣杯布局左右两部分所占的位置实际是中间最大div内的左右padding(内边距)；

双飞翼布局左右两部分所占的位置实际是中间最大div中的子元素div左右margin(外边距)。

那这个既然效果都是一样的，在实际开发中有什么区别呢？