解決問題：兩邊定寬，中間自適應的三欄佈局，中間欄要放在文件流前面以優先渲染，左右中三列代表：子列，主列，附加列，優先載入主列，後續子列，附加列

1.聖盃佈局

• 實現過程-1.HTML標籤

<header class="header">#header</header>
<div class="container">
    <div class="main col">#main</div>
    <div class="left col">#left</div>
    <div class="right col">#right</div>
</div>
<footer class="footer">#footer</footer>
 

• 實現過程-2.css

body{
            min-width:600px;
        }
        .col{
            position: relative;
            float: left;
        }
        .header{
            width:100%;
            height: 30px;
            background-color: #0bffd1;
        }
        .container{
            padding:0px 190px 0 190px;
        }
        .container:after{
            content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
        }
        .main{
            width: 100%;
            height:400px;
            background-color: #62dbff;
        }
        .left{
            width:190px;
            height: 400px;
            margin-left:-100%;
            left: -190px;
            background-color: #0071e9;
        }
        .right{
            width:190px;
            height:400px;
            margin-left:-190px;
            right: -190px;
            background-color: #0071e9;
        }
        .footer{
            width:100%;
            height: 40px;
            background: #0bffd1;
        }
 

• 實現原理：
  左、中、右三個div都左浮動，實現在一行顯示；給三個div的父級元素 .container新增內邊距，左內邊距和右內邊距分別為左右兩個固定div的寬度，中間div放在最前面使其寬度為100%，可優先載入；左側div新增左負邊距為-100%，left：-190px,為左側div寬度負值，實現靠左且不遮擋container，右側div右負邊距和右距離均為其寬度的負值，實現不遮擋container右側；最後因為整個container均為浮動，會使得其脫離文字，利用偽類清除浮動；

標籤：after{
     content:".";
            clear:both;
            display:block;
            height:0;
            overflow:hidden;
            visibility:hidden;
}
標籤：{zoom:1;}//相容IE6.7
 

注意：

after偽類： 元素內部末尾新增內容；
    :after{content"新增的內容";} IE6，7下不相容

zoom 縮放 
    a、觸發 IE下 haslayout，使元素根據自身內容計算寬高。
    b、FF 不支援；

2.雙飛翼佈局

• 實現過程-1.div結構

<header class="header">#header</header>
<div class="main col">
    <div class="main-inner">#main</div>
</div>
<div class="sub col">#sub</div>
<div class="extra col">#extra</div>
<footer class="footer">#footer</footer>

- 實現結果-2.css

<style>
        *{margin:0px;padding:0px;}
        body{min-width:600px;}
        .header,.footer{
            width:100%;
            height:30px;
            background: #00ffff;
        }
        .col{float: left;}
        .sub{
            width:200px;
            height: 300px;
            margin-left:-100%;
            background-color: #85a1ff;
        }
        .extra{
            width:200px;
            height: 300px;
            margin-left:-200px;
            background-color: #85a1ff;
        }
        .main{
            width:100%;
        }
        .main-inner{
            margin-left: 200px;
            margin-right: 200px;
            height:300px;
            background-color: #cba2ff;
            word-break: break-all;
        }
        .footer{
            clear: both;}
    </style>

• 實現原理：
  頭尾及左中右三列並行，與聖盃佈局中左中右三列包含在container中不同，使左中右三列左浮動，中間列寬度100%顯示，左右寬度固定，使左側div左外邊距為-100%,右側負左外邊距為該div的負寬度，實現兩個div浮動在兩邊，然後使中間div裡面的第一層子元素左右外邊距分別為左右兩個div的寬度，實現中間div不被左右兩個div遮擋，最後使footer清除浮動即可；

• 實現結果：

• 總結兩個佈局實現不同之處：

  1. div佈局不同；

  
  2. 中間div不被兩側遮擋的實現方式不同；