关于两栏布局

一、宽度与自适应

1、 浮动 float+ margin

左侧设置浮动，右侧设置margin-left（避免环绕左侧）的布局方法

    

    

        

            
left
        
        

            
right
        
    

优点：容易理解，易于编写
缺点： 兼容性问题 （ IE6有3像素Bug： 当相邻的两个元素，一个是浮动的，另一个非浮动，那么在IE6 下面将会产生3像素bug。）

2、浮动 float+ margin+ (fix)

通过在html文件的right上套上一层right-fix （相当于left和right都在right-fix中）， 然后对right-fix设置浮动可以解决IE6的兼容性问题， 然后提高left的层级设置定位属性为relative。

    

    

        

            
left
        
        

            

                
right
            
        
    

优点：兼容性好
缺点：结构和样式更加复杂，不利于理解

3、浮动 float+BFC(overflow)

通过overflow触发BFC（BlockFormattingContext块格式化文本）模式，内容与外界隔离，不受浮动影响（不会环绕浮动元素）。

    

    

        

            
left
        
        

            
right
        
    

优点：设置简单
缺点：兼容性问题（IE6不支持）

4、 table

table特点每列宽度之和一定是等于表宽度，所以设left，right自动填满剩下宽度。

    

    

        

            
left
        
        

            
right
        
    

缺点：代码较多

5、 flex

flex：1；// flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0，1，auto，后两个属性可选。
flex：1让所有弹性盒模型对象的子元素相同的长度，忽略它们内部的内容。

    

    

        

            
left
        
        

            
right
        
    

缺点：兼容性问题，性能问题（做一些小范围的布局）

6、position:absolute

    

    

        

            
Hello
        
        

            
Hi
        
    

二、不定宽与自适应

1、浮动float + BFC(overflow)

    

    

        

            
left
        
        

            
right
        
    

IE6有兼容性问题

2、table

    

    

        

            
left
        
        

            
right
        
    

3、浮动 float+BFC(overflow)

可以实现不定宽自适应布局

    

    

        

            
left
        
        

            
right