经典布局之圣杯布局&双飞翼布局

前言

所谓经典，说白了就是古老的东西，但是又是很有用的东西。大多数前端，还有本菜，都或多或少了解的圣杯布局和双飞翼布局。

本文只对这两种布局进行简单的探讨(毕竟本菜真的好菜啊)

不管怎样，写作的好处自然很多，可以巩固自己的知识，弘扬程序猿一贯的乐于分享的精神，也望日后能有温故而知新的效果。

概述

虽然两种布局名称不一样，但圣杯布局和双飞翼布局效果是一致的，都是三列布局，都是中间宽度自适应，左右宽度为定值的布局，且都是让浏览器将中间区块优先渲染。

效果图如下：

图1

两种布局采用的策略

1. 圣杯布局:

html结构

    
center
    
left
    
right

1.1 父容器container设置左右margin 以容纳左右两列，container的width不设置，自适应
1.2 三列都设置左浮动，center块设置width为100%，占满父容器宽度；
1.3 然后利用浮动元素设置margin为一定负值时会跳到上一行的特性（注意：如果前面的元素不是浮动元素，负margin是不会起到跳到上一行的效果的），将左边列的margin-left设置为-100%，也就是父容器的宽度，即center那列的宽度，将right块的margin-left设置为负的right块的宽度，比如right块的宽度为100px,则设置margin-left为-100px；
1.4 设置左边列和右边列position为relative，并设置左边列的left为负的左边容器留白的宽度，设置右边列的right为容器右边留白的宽度

2. 双飞翼布局

html结构

    

        
center2
    
    
left2
    
right2

2.1 设置container2的width为100%
2.2 设置center2、left2和right2左浮动，center的width为100%；
2.3 设置left2 的margin-left为-100%，right2的margin-left为right2的宽度的负数
2.4 设置wrap 的左右margin分别为left2和right2的宽度，适当留出一点间隙，width不设置为自适应

完整实现代码

    
    
    


    
圣杯布局
    

        
center
        
left
        
right
    

    


    
双飞翼布局
    

        

            
center2
        
        
left2
        
right2
    

效果：

图2

讨论两种布局的区别

从html上看，双飞翼布局多了一个标签
从css上看，明显地双飞翼布局的css代码更少

而且，圣杯布局暴露出一个问题：

图3

这个图为浏览器窗口缩小到一定大小的时候，圣杯布局出现排版错乱的现象，原因是圣杯布局的中间那块宽度是自适应的，浏览器缩小到中间的那块宽度小于左右两块时，左边的那块margin-left不足以跑到上一行，因此出现了排版错乱的现象。解决的办法为container 设置min-width为左右两块的宽度较大者。但是，这样看来，明显是使用双飞翼布局更优。本人推荐用双飞翼布局的方式。