修改 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 就行。
此外留给大家一个思考题，还有没有其他方式呢？
ul内容超出指定高度换列显示css是因为：在网页设计中，常常需要对li标签做浮动效果，但是在不同浏览器中会遇到兼容性问题，比如IE中会出现ul高度为0的情况，是效果不能达。ul内容超出指定高度换列显示css。首先你要有一个合理的布局：<div class="box">
<ul class="list">
<li>1111111111111</li>
<li>2222222222222</li>
<li>3333333333333</li>
<li>4444444444444</li>
</ul>
</div>
用一个盒子包住一个无序列表，把盒子模型的宽度固定，当li没有宽度的时候，它就是单列的，当li有宽度而且浮动的时候，可以随意变成多列多行。
现在假设盒子模型宽是450~左右内边距是10：
样式一（一列多行）：
*{padding:0margin:0}//初始化内外补白
li{list-style:none}//初始化列表
.box{width:450pxpadding:10px}
.box .list li{line-height:24px}
样式二（二列多行）：
*{padding:0margin:0}//初始化内外补白
li{list-style:none}//初始化列表
.box{width:450pxpadding:10px 0 10px 10px}//这时候列表的宽度只剩下450-10=440,可以把宽度定为210加10右边外补白
.box .list{zoom:1}
.box .list:after{content:""height:0clear:bothdisplay:block}//清除浮动
.box .list li{widht:210pxline-height:24pxfloat:leftmargin-left:10px_display:inline}//两个220刚好440的宽
