一、参考文章
1.双飞翼布局和圣杯布局的对比(http://www.cnblogs.com/tinyphp/p/4743674.html)
二.双飞翼局中用到的属性：
1.浮动——float：设置浮动后，元素会脱离文档流，如果希望文档流按照布局顺序显示，那么需要用到“清除浮动”的hack
(1).left：将元素像右浮动
(2).right：将元素向左浮动
(3).none（默认值）：取消元素的浮动
2.清除浮动——clearfix hack（http://nicolasgallagher.com/micro-clearfix-hack/）：主要实现如下
1 .clearfix:before, 2 .clearfix:after{ 3 content:" "; 4 display:table; 5 } 6 7 .clearfix:after{ 8 clear:both; 9 }
3.边距——margin
(1).此属性为正值时，用于设置元素的外边距。
(2).此属性为负值时，会将元素往前拉。
三.总结：
1.双飞翼布局的核心还是负边距的运用。
2.和圣杯布局不同的是，在不定宽元素中添加了一个div，使得左右两侧元素不用使用相对定位来处理偏移。
3.关键点拆分：
(1).中间不定宽元素放在最前。（目的是为了让不定宽元素最先渲染）
(2).中间不定宽元素中需要再多添加一个div来包裹自定义内容。（这是第一个和圣杯布局最大的不同）
(3).子元素浮动后，需要在父元素清除浮动
(4).利用负边距，将左侧和右侧元素拉到中间不定宽元素的两侧。（左右两侧的元素不用使用相对定位，这个任务交给不定宽元素中的div元素来搞定就可以了。这是第二个和圣杯布局最大的不同）
四.界面截图：
五.代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 * { 11 margin: 0px; 12 padding: 0px; 13 } 14 15 ul { 16 list-style: none; 17 } 18 19 .clearfix:before, 20 .clearfix:after { 21 content: " "; 22 display: table; 23 } 24 25 .clearfix:after { 26 clear: both; 27 } 28 29 body { 30 min-width: 800px; 31 } 32 33 header, 34 footer { 35 background: yellowgreen; 36 } 37 38 .container { 39 background: gray; 40 } 41 42 .container>main { 43 width: 100%; 44 float: left; 45 background: darkorange; 46 } 47 48 .container>main>.inner { 49 margin: 0 150px; 50 } 51 52 .container>nav, 53 .container>aside { 54 background: deeppink; 55 width: 150px; 56 float: left; 57 } 58 59 .container>nav { 60 margin-left: -100%; 61 } 62 63 .container>aside { 64 margin-left: -150px; 65 } 66 </style> 67 </head> 68 69 <body> 70 <header> 71 this is header 72 </header> 73 <div class="container clearfix"> 74 <main class="main"> 75 <div class="inner"> 76 this is main content. 77 </div> 78 </main> 79 <nav> 80 <ul> 81 <li> 82 <a href="#">link1</a> 83 </li> 84 <li> 85 <a href="#">link2</a> 86 </li> 87 <li> 88 <a href="#">link3</a> 89 </li> 90 <li> 91 <a href="#">link4</a> 92 </li> 93 <li> 94 <a href="#">link5</a> 95 </li> 96 <li> 97 <a href="#">link6</a> 98 </li> 99 <li> 100 <a href="#">link7</a> 101 </li> 102 <li> 103 <a href="#">link8</a> 104 </li> 105 <li> 106 <a href="#">link9</a> 107 </li> 108 <li> 109 <a href="#">link10</a> 110 </li> 111 </ul> 112 </nav> 113 <aside> 114 <ul> 115 <li> 116 <a href="#">link1</a> 117 </li> 118 <li> 119 <a href="#">link2</a> 120 </li> 121 <li> 122 <a href="#">link3</a> 123 </li> 124 <li> 125 <a href="#">link4</a> 126 </li> 127 <li> 128 <a href="#">link5</a> 129 </li> 130 <li> 131 <a href="#">link6</a> 132 </li> 133 <li> 134 <a href="#">link7</a> 135 </li> 136 <li> 137 <a href="#">link8</a> 138 </li> 139 <li> 140 <a href="#">link9</a> 141 </li> 142 <li> 143 <a href="#">link10</a> 144 </li> 145 </ul> 146 </aside> 147 </div> 148 <footer> 149 this is footer 150 </footer> 151 </body> 152 153 </html>