两栏自适应布局
其间用到的是：
1.右左两栏自适应高度：
如，左边需要以右边的高度为准，即"去适应"它，则设置左边padding-bottom:1000px; margin-bottom:-1000px;
如，右边需要以左边的高度为准，与上条同理
如，两栏都搞不清楚以谁为基准，可以两个都添加padding-bottom:1000px; margin-bottom:-1000px;
注：无论怎么，父亲标签都要设置overflow:hidden; 原因：我不知道
2.左栏固定，右栏自适应宽度
其实应该就是触发两个元素的bfc？使之成为独立可操控的个体。但是在ie6中要设置margin-left:左边栏的宽度。用height:1%;还是会出现3px。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>两栏自适应布局</title>
<style>
*{margin:0;padding:0}
.wapper{ width:100%; overflow:hidden; }
.left{width:80px;background:#666; float:left; padding-bottom:1000px; margin-bottom:-1000px;}
.right{background:#999;overflow:hidden;/*触发bfc，使之成为个体*/ _margin-left:80px;/*如果不设置这一句，在ie67下会出现3px*/}
</style>
</head>
<body>
<div class="wapper ">
<div class="left">left</div>
<div class="right">
不仅内容区没有排在右侧，而且遭遇了双边距bug。双边距bug非本文重点讨论，直接为.pic增加display:inline来解决。我们关心的是为什么IE6下右侧内容元素还是不能决定自己的布局呢？这里涉及到了另一个概念HasLayout。其实，在完美世界的字典里，是没有HasLayout这个概念的。它是IE浏览器引擎内部特有的属性，它可以影响到元素的定位和元素之间的相互作用。当一个元素的HasLayout属性为true时，这个元素才可以决定自己和其子孙元素的布局。为数不多的元素默认这个属性值为true，包括：
</div>
</div>
</body>
</html>
