CSS多列布局方案

一、定宽与自适应

1、float+margin

float元素的宽度默认为内容宽度，半脱离文档流，对元素，脱离文档流，对内容，在文档流。向指定的方向一直移动。float元素在同一文档流。
兼容性问题： IE6下当浮动元素与非浮动元素相邻时，3px的Bug就会出现，它会偏移3像素。
解决方案：.left设置margin-right为-3px

HTML

<div class="parent">
        <div class="left">
                <p>left</p>     
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>        
        </div>
</div>

CSS

.left{
        float:left;
        width:100%;
}
.right{
        margin-left:120px;
}

2、float+margin+（fix）

该方法是对第1个方法的改进，修复了第1个方法中“3像素”的问题。

HTML

<div class="parent">
        <div class="left">
                <p>left</p>     
        </div>
        <div class="right-fix">
                <div class="right">
                        <p>right</p>
                        <p>right</p>        
                </div>
        </div>
</div>

CSS

.left{
        float:left;
        width:100px;
        position:relative;
}
.right-fix{
        float:right;
        width:100%;
        margin-left:-100px;
}
.right{
        margin-left:120px;
}

3、float+overflow

IE6下不支持这样的写法
HTML

<div class="parent">
        <div class="left">
                <p>left</p>     
        </div>
        <div class="right">
                <p>right</p>
                <p>right</p>        
        </div>
</div>

CSS

.left{
        float:left;
        width:100px;
        margin-right:20px;
}
.right{
        overflow:hidden;
}

4、table

table-layout：fixed可以提高渲染速度，布局优先
兼容性：只支持IE8及以上，因为IE6、7不支持table属性

HTML

<div class="parent">
        <div class="left">
                <p>left</p>     
        </div>
        <div class="right"