关于自适应左右布局
左右布局在前端开发中经常遇到，但是实现方法五花八门，自己也一直比较纠结该使用哪种方式，今天将收集到的一些方法总结一下，以备后用。
1、左右定宽布局
浮动应该是实现左右布局的最常用的方式，下面就是使用浮动制作左右布局的效果。
如果左右两边的宽度确定，则可以左栏使用float:left; 右栏使用float:right; 这样可以解决ie6下3像素bug的问题。关于ie3像素bug请参考这里。
2、左栏定宽，右栏自适应宽度
<div style="margin: 0 auto;"> <div style="width: 200px; height: 100px; float: left; background-color: #95f49e;">left</div> <div style="background-color: #fff; height: 100px; border: 1px solid #ccc;">right</div> </div>
方法1：左栏使用float:left; 如果左栏的div是一幅图片，想让右边的文字围绕图片显示，则去掉右边的div，将文字直接写入左栏div的后面即可。这种方式同样在ie6下会有3px的bug。
方法2：使用负margin
<div id="demoLayout" style="width: 500px;"> <div style="min-height: 170px; padding: 10px;"> <div class="demoShowPic"><img src="http://www.hicss.net/wp-content/uploads/2011/toygersKittens.jpg" alt="toygers kittens" width="200" height="166" /></div> <div style="margin: -170px 0 0 215px;">负margin能够替代float浮动布局，进行左右布局规划，并且拥有float所没有的自适应效果。你可以尝试点击变宽和变窄按钮来查看本例。现如今，负margin技术的应用可谓越来越广，任一个大型站点惊鸿一瞥之下都会有其身影所在。</div> </div> </div>
使用负margin的好处是，改变父div的宽度时，右边文字div会自适应。但是使用负margin也有个问题，即如果内部最后一个子元素使用负margin上移后，由于父元素是其边距元素，其实际高度由于内部子元素上移也会跟着变小。解决方式就是设置一个最小高 度，最小高度值为较小的固定元素高度（此例即为左边固定的图片高度），就可彻底解决负margin上移影响父元素高度Bug。
3、三列等高
三列等高布局，并且不允许使用背景平铺，这好像是一个公司的面试题。网上有个牛人使用背景分离的方式实现，且不使用任何expression和hack，记下链接。
源码为：
<style> .col1{ width:30%;float:left;position:relative;left:70%;} .col2{ width:40%;float:left;position:relative;left:70%;} .col3{ width:30%;float:left;position:relative;left:70%;} .container1{background-color:yellow; float:left; overflow:hidden;} .container2{background-color:blue; float:left;position:relative; right:30%;} .container3{background-color:red; float:left;position:relative;right:40%;} </style> <div class="container1"> <div class="container2"> <div class="container3"> <div class="col1">this is first col Heroku和Morph实验室是Ruby on Rails的托管提供商，提供运行Ruby on Rails应用的整套环境。和传统的托管商相比，他们并不仅仅是提供一个服务器给你，而且提供有趣的工具和接口来帮助你更加容易的工作，使你从繁重的安 装、配置、管理和保证服务器安全中解脱出来。两者皆是使用Amazon的EC2网格计算技术来运行应用，因此你可以毫不担心可伸缩性与性</div> <div class="col2">this is second col</div> <div class="col3">this is third col</div> </div> </div> </div>
这里面需要注意一点：容器也必须是左浮动的，否则背景颜色无法显示，容器相对定位移动自然无法达到预期效果。
这个问题有必要解释下：一个父div包含多个子div时，如果子div设置了浮动，父div没有设置高度，此时浮动的子div就离开了原来的布局，因此父div就没有高度了（不设置浮动时父div的高度是由于被子div的内容撑开了，所以才有高度），自然父div的背景也就没了。
可见父容器背景无法显示是由于父容器没有了高度，解决方法还有其他几种：
a）除了给父div也增加浮动外，还有一种方法。就是在<div class="col3">this is third col</div>后面再加一个<div class="clear" style="clear:both;height:0;"></div>，这样即使三个父容器不加浮动也可以达到预期效果。clear:both;即清除左右的浮动，使当前的div独占一行，这样父容器的高度就等于Max(col1.height,col2.height,col3.height)+clear.height。height:0;是为了修正ie下的bug。当然这样的一个弊端就是增加了一个无语义的标签，不太友好。
b) 只适用于ie。既然父容器没有了高度，就强制让父容器有高度，在ie下触发父容器的haslayout属性，可以通过设置父容器的zoom:1;属性达到目的。即 .container3{background-color:red; zoom:1;position:relative;right:40%;}这样在ie下也可以。
最后在提醒下，container2和container3是不能设置overflow:hidden;属性的，否则就会将container2和container3触发为BFC（block formatting context，详细定义后续再写文章解释下吧）。一旦触发为bfc就会隔断浮动，也就是说如果container3触发为bfc，则col1, col2, col3三列的浮动只在container3中起作用，即使你在col1中设置了position:relative;left:70%;移位属性也不能跨越container3的边界。不知道我理解的对不对：）。
在ie7下需要给container1，container2，container3都加上width:100%属性。
