摘要：布局任何元素在默認的情況下都是處于整個文檔流中的，不會浮動的。相對定位如果想為元素設置層級布局模型中的相對定位，需要設置表示相對定位，它通過屬性確定元素在正常文檔流中的偏移位置。

網頁原生布局的方法其實網上有很多，大概為Flow（流動布局模型）、Float（浮動布局模型）、Layer（層級布局模型）。

流動布局模型其實就是默認的網頁布局模式。也就是說網頁在默認狀態下的HTML網頁元素都是根據流動模型來分布網頁內容的。
流動布局將會有兩個比較典型的特征，
第一，塊級元素都會在所處的最近父級容器元素內自上而下按順序垂直順延分布，因為在默認狀態下，塊級元素的寬度都是100%（即父級元素寬度的100%）。實際上，塊狀元素都會以行的形式占據位置。如下代碼所示，

    
        
我是h1
        
我是div
    

如上述代碼所示，在沒有外在樣式的影響下，h1和div的寬度都將是100%（為頁面的默認寬度）。
第二，在流動模型下，內聯元素都會在所處的最近父級容器元素內從左到右水平分布顯示。

    
        我是a
        我是span
    

內聯元素不會像塊級元素那樣獨自的占據一行。

任何元素在默認的情況下都是處于整個文檔流中的，不會浮動的。當我們給某一個元素設置浮動時，即可讓該元素擺脫當前文檔流，成為浮動元素。
如下代碼，給div元素設置浮動，讓兩個div并排顯示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}

我是div1
我是div2

這里有一點需要注意，如果我給div設置的浮動是float: right，那么div1將會貼在右側，而div2將會貼在div1的左側。

什么是層級布局模型？

層級布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由于網頁大小的活動性，層級布局模型沒能受到熱捧。但是在網頁上局部使用層級布局還是有其方便之處的。
應用層級布局，往往需要定位屬性的配合。CSS中有3種定位類型，

絕對定位(position: absolute)

相對定位(position: relative)

固定定位(position: fixed)

如果想為元素設置層級布局模型中的絕對定位，需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。

如果想為元素設置層級布局模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
相對定位與絕對定位最大的區別在于，前者沒有脫離當前文檔流而后者已經脫離了當前文檔流。脫離當前文檔流的意思是，該元素的前后元素在計算位置和偏移時將不再計算該元素的大小和位置。

position: fixed，表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?（用于定位背景圖片的位置）屬性功能相同。
固定定位在某一種場景下很有用，當我們需要在頁面的某一位置固定的展示某一元素，且不受頁面滾動條的影響。比如，常見的“返回頂部”之類的按鈕。

現代網頁布局中，經常將相對定位和絕對定位混合使用，以達到更加靈活的目的。如下代碼，

    
相對參照元素進行定位

即，box2相對于box1是絕對定位的。當改變box1的位置時，box1內部的子元素是不會發生變化的，因為他們都是相對box1絕對定位的。

方法一：

 float + calc()
.right {
    width: calc(100% - 100px);
}

方法二：

position / float + margin-left
//html部分同上
//css
.left {
  position:absolute;left: 0; /*或 float:left; */
  width: 100px;
  background: blue;
}
.right{
  margin-left: 100px;
  background: red;
  text-align:center;
}

1.左浮動，右邊用margin-left長度為左邊的固定寬度，寬為100%

2.利用的是創建一個新的BFC（塊級格式化上下文）來防止文字環繞的原理來實現的。BFC就是一個相對獨立的布局環境，它內部元素的布局不受外面布局的影響。它可以通過以下任何一種方式來創建：

float的值不為none

position的值不為static或者relative

display的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個

overflow的值不為visible

首先有三行，頭部和尾部各占一行，中間內容區一行，頭尾不重要
中間內容分為三列對應三個div,為了先展示中間的主要內容所以把中間那列放前面，然后是左和右對應的div
中間內容自適應寬度為100%，此時已經把3個div所在的父容器占滿了，所以想辦法讓左右2個div放置在左右側，
左側采取margin-left取-100%讓其在最左側，

右側同理取值-200px(像素值為寬度大小)，保證剛好占滿自身寬度
這時候測試發現已經有自適應效果了，但是縮小到一定程度頁面就出問題了，左右不在了，
所以加上最低寬度就是左右2個DIV的寬度（另外得考慮瀏覽器默認的body下的margin為8px,做了樣式重置不考慮）
這時候發現中間的內容文字被左右遮擋了，對父容器用pading左右值為左右元素寬度，
為什么不對中間的DIV設置padding,我發現設置了不起作用，具體的原因我暫時也搞不懂來龍去脈，
發現padding后左右有留白，這個時候左邊需要用 left: -200px;position: relative;來設置DIV位置，
辦法確實巧妙。右邊實現同理。

這時候發現已經大致有了點樣子了，效果也看的到，此時典型的三欄布局，左右固定，中間內容自適應已經完成。

總結：

其實這個布局已經有點年頭（圣杯布局），通過左右兩塊DIV來遮擋了中間div寬度為100%的區域，
然后壓縮了三個DIV共有的父容器，來實現對中間內容展示的完善，也使左右2個不在遮擋中間了。
然后我又趁機試了下z-index屬性，這里有個小問題要注意（要讓z-index起作用有個小小前提，
就是元素的position屬性要是relative，absolute或是fixed）
我之前的想法是讓中間的內容置于頂層，不受div會因為某種hack導致位置變更遮擋了中間內容。
只需要設置下z-index屬性值即可，左右可不設置，也可以設置以防萬一，不同瀏覽器對z-index的默認值解析不同，可能會導致問題。
基本的布局架構就是如此，根據實際項目需求在此架構上完善，或者以后遇到這種類似的問題能打開思路，便算是有點收獲了。

        
Header內容區
    
    

        

            
中間彈性區
            

                我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容
            
        
        

            
左邊欄
        
        

            
右邊欄
        
    
    

雙飛翼布局的方式跟圣杯在前部分是一樣，不同之處主要在于如何處理中間的內容塊被遮擋的問題
圣杯用padding的思路，使之壓縮，但是父容器壓縮，左右DIV位置變更，只能用相對位置進行left
設置位移為元素寬度來調整
而雙飛翼的路線為采用的方式相比圣杯的父容器padding，
改變的是中間內容的內層div的外邊框，相對來說對布局的破壞不大，
但是要采用這種方式又不破壞頁面結構，就只能在中間內容div內部的再加個DIV設置margin或padding.
使之內容變相“壓縮”等同padding效果，并且不會改變中間內容DIV外部的結構，只是內部的。
細心的人留意下我注釋的代碼，這里其實還有個CSS浮動的樣式問題，出現這種情況有各種方式清除浮動，
我就不多講解。大概有6種。

1.一般目前常用就是用：after偽元素給使用的浮動的父容器設置。

     新浪使用方式
        .clearfix:after{ 
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        .clearfix:after{  /*最簡方式*/
            content: "";
            display: block;
            clear: both;
        }

2.給父元素定高

3.利用 overflow:hidden 屬性

    
    
    
    
    



    

        
Header內容區
    
    


        

            

                
中間彈性區
                

                    我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容我是各種內容
                
            
        
        

            
左邊欄
        
        

            
右邊欄
        
    
    

本篇只做階段性的初級總結，原諒我沒有貼出代碼的效果圖，以后有機會再擴展并進行效果圖片展示，希望大家自己在編輯器下嘗試效果。