CSS经典布局 -- 圣杯布局 & 双飞翼布局

引言

圣杯布局和双飞翼布局都是比较经典的三栏布局，两种布局的页面效果基本相同。两种布局都是两侧宽度固定， 中间宽度自适应 且 中间内容优先渲染 的三栏布局。

圣杯布局

圣杯布局DOM结构

 	<header>this is the header</header>
    <main>
      <div class="center">this is the center</div>
      <div class="left">this is the left</div>
      <div class="right">this is the right</div>
    </main>
    <footer>this is the footer</footer>

内容区域main包含三个div标签，class分别为center、left、right。（顺序很重要，center一定要放到最前面，确保其优先渲染）

圣杯布局样式

第一步，将内容区域设置padding，为左右两栏留出空间。并设置内容区域的各栏宽度，中间栏宽度 100%，让其自适应，两边栏宽度固定。（宽 / 高根据实际情况设置，这是数值是为了演示方便）

		main{
   
            padding-left: 200px; 
            padding-right: 150px;
        }
        .center {
   
            width: 100%;
            height: 200px;
        }
        .left {
   
            width: 200px; 
            height: 200px;
        }
        .right {
   
            width: 150px; 
            height: 200px;
        }

页面效果：

第二步，为三栏分别添加 float: left; （为了演示效果，添加了背景颜色）

修改后的CSS代码如下：

 		.center {
   
 			float: left;
            width: 100%;
            height: 200px;
            background-color: orange;
        }
        .left {
   
        	float: left;
            width: 200px; 
            height: 200px;
            background-color: red;
        }
        .right {