布局模型中经典布局有：
三栏或者二栏布局中主内容自适应宽度且侧栏主栏可随意换位置，本文将针对这个需求进行分析。
这次布局模型将从absolute+margin–>float+margin–>圣杯布局–>双飞翼布局–>flex弹性盒子布局
需要注意的点：在此说明一下。
由于搜索引擎从上到下搜索的形式，所以建议把main放到aside前面去，主内容优先显示。注意清除浮动利用相对定位实现主栏和侧栏的位置。
aside设置position:absolute，相对于父元素#content定位。
aside{ position:absolute; left:0; top:0; width:200px; background:green }main设置margin-left/right:210px;，为aside留出空间。main元素还是块级元素，宽度自动填充100%,自适应。
main{ margin-left:210px; background:green; }以上是侧栏在左情况，若侧栏在右同样可以，只需css稍微改变。
aside{ position:absolute; right:0; top:0; width:200px; background:green } main{ margin-right:210px; background:green; }absolute脱离文档流，不影响上下文，所以无法撑起父元素#content的高度，如果侧栏内容多于主栏内容（侧栏高度低于主栏高度），侧栏则会溢出父元素#content，这个问题无法修复。如下图所示：
aside设置float
aside{ float:left; width:200px; background:blue; word-break: break-all;/*连续的英文和数字不会自动换行，此处控制自动换行*/ }main设置margin-left/right，为aside留出空间。main元素还是块级元素，宽度自动填充100%,自适应。
main{ margin-left:210px; background:green; }敲完代码，查看结果，把aside放在右边也是一样，这并不是我们想要的，请看：
这个就是浮动换行问题，浮动元素必须放在正常元素的前面，所以html代码需要改。
<div class="wrap"> <header>header</header> <div id="content"> <aside>aside<br>中文如果超过宽度会换行，对于连续的英文和数字超过不会自动换行。需要加上break-word:break-all;</aside> <main> main<br>主栏 </main> </div> <footer>footer</footer> </div>不能实现主内容优先，因为浮动元素需放前，不然会浮动换行。
以下以循循渐进方式讲述圣杯布局。
给aside和main都设成float;left； main宽度设成100%。
main{ float:left; background:green; width:100%; } aside{ float:left; width:200px; background:blue; }这样aside和main就成为了两行显示，main独占一行。
为aside设置负margin-left!!!
aside设 margin-left:-100%会上升到main栏左侧。margin-left:-210px；会上升到main栏右侧。
aside{ float:left; width:200px; background:blue; margin-left:-100%;/*这里负margin要好好理解，-200就是上升在最右边，-100%就是上升在最左边。*/ }但是你会发现侧栏挡住了主栏。
你想设置main的margin？那可不行，main的宽度100%，设置margin自己就跑出去了。
那么把main的父元素设置padding吧。
#content{ margin-bottom:10px; padding-left:210px; }可是你发现aside也跟着空出位置来了，因为他也是#content的子元素，不是我们想要的。
给aside设置position:relative；相对自身进行位移。
aside{ float:left; width:200px; background:blue; margin-left:-100%;/*这里负margin要好好理解，-200就是在最右边，-100%就是在最左边。*/ position:relative; left:-210px; }把侧栏和主栏换位置也是可以的，只需改动css
#content{ margin-bottom:10px; padding-right:210px; } aside{ margin-left:-200px;/*这里负margin要好好理解，-200px就是在最右边，-100%就是在最左边。*/ position:relative; right:-210px; }圣杯布局可以实现主内容优先显示，也可以主栏、侧栏变位置，当然也可以防止溢出父元素。
main和aside全部float，aside宽度固定，main宽度自适应100%；aside利用margin-left:-100%实现上升到main一栏的左侧，如果margin-left:-aside宽度 实现上升到main一栏的右侧。给父元素加（aside在左侧）padding-left:aside宽度;（aside在右侧）padding-right:aside宽度；aside利用relative自身定位，相对自己移位。注意如果是三栏布局必须给body设置最小宽度，如果宽度小于一定值，右栏会掉下去的。min-width:2*左栏+右栏；双飞翼布局为了实现以上效果，多加一个标签，即给main包裹了一个div，给div设置padding，让main留出位置给aside，这样aside就不用自身定位了，父元素也不用padding了。
<div id="content"> <main> <div id="inner">main<br>主栏</div> </main> <!--主栏写在前面，因为主栏比侧栏重要，搜索引擎是从上往下解析内容的。中文如果超过宽度会换行，英文数字超过不会自动换行。需要加上break-word:break-all;--> <aside>aside<br>中文如果超过宽度会换行，对于连续的英文和数字超过不会自动换行。需要加上break-word:break-all;</aside> </div>css代码：
#inner{ margin-left:210px; background:green; }如果你想让main和aside一样高怎么办呢？如图：
用flex弹性盒子解决。
给main和asdie父元素设display:flex;和flex-flow 给main设置flex:1,合理分配剩余空间。
#content { display: flex; flex-flow: row-reverse;/*如果是row(默认值)，则侧栏在右*/ } main{ flex: 1;/*按比例缩小或者放大，如果没有这一项就会是按照内容宽度显示*/ background:green; margin-left:10px; } aside{ width:200px; background:blue; }盒子满足以上所有优点，但是需要考虑兼容性问题。 在线演示 全部详细代码
