修改 css 就可实现 位置调换 ，如下：
优点 ： 交换 <div class="sidebar">固定</div> 、 <div class="main">自适应</div>顺序 ，实现主要内容优先加载渲染。
缺点 ：absolute 定位，脱离文档流，当 sidebar 列的高度，超过 main 列的高度，会遮住下面的元素。需要给父盒子设置 overflow 属性。
也支持位置调换：
缺点 ：不能实现主要内容优先加载渲染。
位置调换：
这里有一点需要注意： .sidebar 没有设置高度，会和 .container 保持一样的高度。 .container 的高度是被 .main 撑开的，也就是和 .main 高度一样。
位置调换：
这里 .main 和 .sidebar 高度不单独设置的话，也是同样的高度。
位置调换：
位置调换：
这里让 .main 成为 BFC 主要是消除 .sidebar 因 float 带来的影响，只要能让 .main 成为 BFC 就行。
此外留给大家一个思考题，还有没有其他方式呢？
现有样式
不能满足人们的需求.
人们需要:
CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局
国外一般不这么叫. <div> 是一个无语义的标签，适合用来做与内容无关的事情.
只能用 <div> 吗？
优化:
省标签，便于控制局部 范例
给通栏加背景色 范例
IE 6 不支持 inline-block :
范例
一列固定宽度，另外一列自适应宽度
浮动元素 + 普通元素margin 范例
如果侧边栏在右边:
注意: 考虑到浏览器的渲染顺序,
aside和main顺序不可更改.
两侧两列固定宽度，中间列自适应宽度
范例
