网页布局之两列布局

• 一列定宽和另一列自适应

1.flotat+margin

image.png

缺点：IE6中会产3px的间距bug，并且.right不能清除浮动，否则会掉下去

2.fix版本

image.png

在.right外面套一层div，让其右浮动，并且margin负值

3.float+overflow

image.png

唯一的缺点是不支持IE6，但是我觉得在现在的形势下，这已经快不成为缺点了

4.flex布局

image.png

优点在于代码很少很简单，缺点则在于兼容性和性能一般，一般用来做小范围布局

• 一列不定宽定宽和另一列自适应

1.float+overflow

image.png

这一套方法同样也可以做不定宽，这主要是由于第一列使用float，浮动元素的宽是由其内容宽度决定的，所以本身就是自适应。

2.flex

image.png

同上，使用flex布局的元素本身宽度也是自适应的

3.绝对定位

3.table