标签：
仔细分析各种布局的技术实现，可以发现下面三种技术被经常使用：
这是实现布局的三个最基本的原子技术。只要巧妙组合，并加以灵活运用，就能“拼”出各种布局的实现方案。
尝试之路考虑以下DOM结构：
1 <div id="page"> 2 <div id="hd"></div> 3 <div id="bd"> 4 <div class="main"></div> 5 <div class="sub"></div> 6 <div class="extra"></div> 7 </div> 8 <div id="ft"></div> 9 </div>
利用浮动元素的负边距来定位：
1 .main { 2 float: left; 3 width: 100%; 4 } 5 .sub { 6 float: left; 7 width: 190px; 8 margin-left: -100%; 9 } 10 .extra { 11 float: left; 12 width: 190px; 13 margin-left: -190px; 14 }
这样我们得到了第一个尝试页面 点击这里查看效果
可以看出，通过简单的负边距，已经让sub和extra定位到正确的位置。剩下的问题是如何让main也定位到正确的位置。
一个自然的想法是，给main的容器#bd添加padding:
1 #bd { 2 padding: 0 230px 0 190px; 3 }
这样能让main定位到正确的位置，但sub和extra的位置不对了。这是一个思考的关卡。既然sub和extra的位置不对，那就想办法调整到正确的位置。相对定位隆重登场：
1 .sub { 2 float: left; 3 width: 190px; 4 margin-left: -100%; 5 position: relative; 6 left: -190px; } 7 .extra { 8 float: left; 9 width: 230px; 10 margin-left: -230px; 11 position: relative; 12 right: -230px; }
很明显，这就是圣杯布局！
在不增加任何额外标签的假设上，我尝试了各种想法，但始终都没找到完美的布局实现（圣杯布局是我觉得所有想法中最接近完美的）。
既然不添加额外标签时，完美布局的实现如此困难，那如果允许添加一个额外标签呢？在淘宝UED内部的探讨中，给main增加了一层包裹：
1 <div id="main" class="column"> 2 <div id="main-content">#main</div> 3 </div>
里层main-content的作用就是将main定位到合适的位置，并方便设置padding等属性。想到此处，就像牛顿被苹果砸傻了一样，原来的main定位问题迎刃而解：
1 <div id="page"> 2 <div id="bd"> 3 <div class="main"></div> 4 </div> 5 </div>
CSS仅需增加一行：
.main-wrap { margin: 0 230px 0 190px;}
想看example4效果点这里
一切如此简单！除了添加了一个额外标签，其它各方面，表现都很完美（试了下IE5.5, 也没任何问题）。目前只用到了浮动和负边距，如果再引入相对定位，还可以实现三栏布局的各种组合
1 .extra { 2 float: left; 3 width: 230px; 4 margin-left: -100%; 5 position: relative; 6 left: 190px; 7 } 8 .main-wrap { 9 margin-left: 430px; 10 }
仔细查看example5和example4的源代码，可以发现DOM结构是完全一样的，仅仅CSS稍有不同。这意味着HTML结构和CSS布局在一定程度上解耦了，我们开发HTML代码时，从内容出发即可，无需过多的考虑布局。这正是渐进增强在前端工作流程上的体现。
如果把三栏布局比作一只大鸟，可以把main看成是鸟的身体，sub和extra则是鸟的翅膀。这个布局的实现思路是，先把最重要的身体部分放好，然后再将翅膀移动到适当的地方。因此请容许我给这个布局实现取名为双飞翼布局（Flying Swing Layout）.
就如上图中的鸟有各种姿势一样，利用双飞翼布局，我们也可以实现各种布局。这里有个尝试页面，利用双飞翼，实现了一套栅格化布局系统。
优点
不足
双飞翼的布局非常灵活，只要调整css代码就可以搞定一切。
标签：
原文地址：http://www.cnblogs.com/tuziv5/p/4451002.html
