今天开始说2列布局吧。
?
仍然分为html与css两部分来讲。
?
html部分仍然非常简单。就是下面这个两层div的结构。其中，外层用一个class叫做content包裹起来。内侧有2个容器，分别叫做left和right。
?
?
<div class="content"> <div class="left"> left box </div> <div class="right"> right box </div> </div>
?
接下来是css的部分。
?
关于两列布局，最主要应用的一个css属性就是float。float的作用主要有2个，本节会讲解其中的一个――用来让两个或两个以上块级元素呈现横向排列。
?
float这个属性有三个属性值。分别是left,right,none。
float:left表示一个容器向左浮动。
float:right表示容器向右浮动。
float:none表示容器不浮动（注意区分清除浮动）。通常没有写float的元素，float都是none的，我们不需要写。那么这个float:none有什么用呢？比如你写了个继承。用上面的html举例子吧。如果你写了这样一段css
?
?
.content div{float:left;}
.content div.right{float:none;}
?这段css的第一行，表示让content中所有的div元素左浮动。而这时候我们希望class="right"的那个div不浮动，就可以用第二行的代码覆盖掉第一行的属性值啦~
?
一般的两列布局，也分为两种情况。
?
1，外容器固定宽度，左右两列也固定宽度。
?
2，外容器没有固定宽度，左侧固定宽度，右侧不固定宽度。（或者右侧固定宽度，左侧不固定宽度）也就是传说中的自适应宽度。
?
无论是上面的哪种情况。由于只是涉及到呈现的形式，所以，只是css不同。html的代码是几乎不变的。
?
我们首先来讲自适应宽度的吧！因为其实固定宽度，可以看成是自适应宽度的，给了外层content一个固定宽度而已。其他的代码几乎是相同的。
?
左右布局的css写法，大概有下面这么几种常用的。我以左侧固定宽度，右侧自适应宽度作例子。左侧宽度为200px。
?
方法一：left元素左浮动。right元素以margin-left的方式对齐。
?
示例图：
首先我们需要让左侧浮动起来，并且给左侧固定的宽度。于是我们用到了：
?
?
.left{width:200px;float:left;}
?
?
接下来，刷新下浏览器，是否发现 left box和right box这两段文本已经放在一行啦？而且中间有一定距离啦。那个距离，应该就是由200px产生的。为了更清楚的确认左右两个容器的范围，我们给两边各分别定义一个背景色。
?
定义背景色，用到的css属性叫做background-color。
?
.left{width:200px;float:left;background-color:#3ff;}
.right{background-color:#3f3;}
?
这时候我们看起来已经成功了吧？
?
可是当你在右侧再增加一些文本的时候。。。让文本多到至少2行以上的时候。。就发现问题了。在除了IE6以外的浏览器下，除了left以外的所有区域，背景色都被填满了。但是IE6看起来还算正常吧？貌似会有一条小百边，这个稍后会讲到的。先表好奇啦~~
?
这时候，我们就需要用到margin-left属性啦~~写在right上。
?
?
.left{width:200px;float:left;background-color:#3ff;}
.right{background-color:#3f3;margin-right:220px;}
?
?
margin-left的值，通常需要大于等于左侧left的宽度。否则，左右仍然有可能有重叠的区域。
?
但是，这也不是最完整的代码。。如果用屏幕尺来测量IE6下右侧容器的位置，与其他浏览器下对比，会发现，IE6下的右侧容器位置与其他浏览器下右侧容器的位置不同，似乎向右偏移了3个像素。因此，我们需要为IE6写hack。
?
IE6的hack需要用 “_属性：属性值”这样表示。我们需要将margin-left的值在IE6下减去3像素。
?
当我们在左侧填写1行文本，而右侧是2行文本的时候，还会发现另外一个问题：第二行的文本向左侧偏移了3px。这个时候，我找到的解决方案仍然是hack。在right上用zoom:1来出发haslayout。
?
zoom属性本身是缩放的意思。而zoom:1等同于缩放值为100%，也就是原大小。而在IE6下，zoom:1通常用来触发haslayout。关于haslayout，请自行上网搜索这个关键词，你会找到数以万计的内容雷同的解释。
?
我对zoom:1这玩意的解释只有一点――如果IE6下样式有问题，zoom:1无疑是个很好的解决方案。能解决很大一部分IE6的bug。
?
额。。。总结下，最终的css代码加入hack后会写成这样。
?
?
.left{width:200px;float:left;background-color:#3ff;}
.right{background-color:#3f3;margin-right:220px;_margin-left:217px;_zoom:1;}
?
这个方案还缺失一部分：外层清浮动。以后到复杂布局的时候在讲啦。
?
这个方法的优点：
HTML结构非常简单。不需要为了样式呈现增加多余的Dom结构。（以后会讲到另一种方法，需要增加一层dom的，但是可以规避这个方法本身的一个缺陷。其实就是原来LC的英文版My account中的结构。
?
这个方法的缺点：
这个方法有个很大的缺点，也可以说是缺陷：左右侧必须有至少3px的间距。如果左右两侧是没有间距的，IE6下就挂了。如果有背景色的话，更是无法做到IE6下左右两侧背景色无缝隙的衔接在一起。中间会有3px抹不掉的白色！！
?
针对这个缺陷的解决方案：
解决方案也有~而且就实际需求来说，很靠谱。如果左右两侧有背景色的话。。那么左右两侧的背景色几乎都是要求平铺下来的，不会允许左右侧下边不齐吧！这个时候，这种布局的背景色，只能做成可纵向平铺的背景图了。其实也就很巧妙的可以解决IE6下这个bug了。。
?
?