双飞翼布局--始于淘宝UED
UED的本意是用户体验设计，User Experience Design,通常的理解，我们做的一切是为了呈现在您眼前的页面。
<body>
<div id="left_div"></div>
<div id="main_div"></div>
<div id="right_div"></div>
</body>
这是我们平时的写法，为其添加CSS样式
<style>
#left_div{
float:left;
width:20%;
height:500px;
background-color: red;
}
#main_div{
float:left;
width:50%;
height:500px;
background-color: green;
}
#right_div{
float:left;
width:30%;
height:500px;
background-color: blue;
}
</style>如果按照浮动方法写，页面在被浏览器解析时，按照左侧功能区块，主题内容功能区块，右侧功能区块进行加载。
但是现在很多项目都是需要主体功能区块优先加载，并且随着设备屏幕的不断加大，为了兼容，还需要主体内容宽度自适应，那么此时就用到了双飞翼布局。
双飞翼布局，常用到以下三个技术：
（1）负边距：margin-left
（2）浮动：float
（3）定位：position
<div id="main_div"></div>
<div id="left_div"></div>
<div id="right_div"></div>
其CSS样式如下：
<style>
#main_div{
float: left;
width: 100%;
background-color: red;
height: 200px;
}
#left_div{
float: left;
width: 190px;
margin-left: -100%;
background-color: green;
height: 200px;
}
#right_div{
float: left;
width: 190px;
margin-left: -190px;
background-color: blue;
height: 200px;
}
</style>注意：
（1）id=“left_div”，负边距的作用是让id=“left_div”，即左边的div盖在id=“main_div”，即中间div的最左边。这个div指的是外面的div，即id=“main_div”的宽度。
（2）id=“right_div”， 定义的负边距应和width互为相反数，这样会使其盖在id=“main_div”即中间div的最右边。
以上，为双飞翼布局。
如果按照浮动方法写，页面在被浏览器解析时，按照左侧功能区块，主题内容功能区块，右侧功能区块进行加载。
