right

right

【3】float + margin + calc

除了增加结构的方法外，还可以使用calc()

[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加减运算

    
        
left
    
    
        
right
        
right
    

【4】float + overflow

还可以使用overflow属性来触发bfc，来阻止浮动造成的文字环绕效果。由于使用overflow不会改变元素的宽度属性，所以不需要重新设置宽度。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器

    
        
left
    
    
        
right
        
right
    

思路2: inline-block

inline-block内联块布局的主要缺点是需要设置垂直对齐方式vertical-align，则需要处理换行符解析成空格的间隙问题。IE7-浏览器不支持给块级元素设置inline-block属性，兼容代码是display:inline;zoom:1;

【1】inline-block + margin + calc

一般来说，要解决inline-block元素之间的间隙问题，要在父级设置font-size为0，然后在子元素中将font-size设置为默认大小

[注意]IE8-、android4.3-、IOS5.1-不支持，android4.4+只支持加减运算

    
        
left
    
    
        
right
        
right
    

【2】inline-block + margin + (fix)

    
        
left
    
    
        
            
right
            
right
                
    

思路3: table

使用table布局的缺点是元素被设置为table后，内容撑开宽度，所以需要设置width:100%。若要兼容IE7-浏览器，需要改为

    
        
left
    
    
        
            
right
            
right
                
        

思路4: absolute

absolute布局的缺点是由于父元素需要设置为relative，且子元素设置为absolute，所以父元素的高度并不是由子元素撑开的，需要单独设置。

[注意]IE6-不支持相对的偏移属性同时设置

    
        
left
    
    
        
right
        
right
            

思路5: flex

flex弹性盒模型是非常强大的布局方式。但由于其性能消耗较大，适合于局部小范围的布局

[注意]IE9-不支持

    
        
left
    
    
        
right
        
right
            

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。