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

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

流動布局模型其實(shí)就是默認(rèn)的網(wǎng)頁布局模式。也就是說網(wǎng)頁在默認(rèn)狀態(tài)下的HTML網(wǎng)頁元素都是根據(jù)流動模型來分布網(wǎng)頁內(nèi)容的。
流動布局將會有兩個比較典型的特征，
第一，塊級元素都會在所處的最近父級容器元素內(nèi)自上而下按順序垂直順延分布，因?yàn)樵谀J(rèn)狀態(tài)下，塊級元素的寬度都是100%（即父級元素寬度的100%）。實(shí)際上，塊狀元素都會以行的形式占據(jù)位置。如下代碼所示，

    
        
我是h1
        
我是div
    

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

    
        我是a
        我是span
    

內(nèi)聯(lián)元素不會像塊級元素那樣獨(dú)自的占據(jù)一行。

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

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

我是div1
我是div2

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

什么是層級布局模型？

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

絕對定位(position: absolute)

相對定位(position: relative)

固定定位(position: fixed)

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

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

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

現(xiàn)代網(wǎng)頁布局中，經(jīng)常將相對定位和絕對定位混合使用，以達(dá)到更加靈活的目的。如下代碼，

    
相對參照元素進(jìn)行定位

即，box2相對于box1是絕對定位的。當(dāng)改變box1的位置時，box1內(nèi)部的子元素是不會發(fā)生變化的，因?yàn)樗麄兌际窍鄬ox1絕對定位的。

方法一：

 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.利用的是創(chuàng)建一個新的BFC（塊級格式化上下文）來防止文字環(huán)繞的原理來實(shí)現(xiàn)的。BFC就是一個相對獨(dú)立的布局環(huán)境，它內(nèi)部元素的布局不受外面布局的影響。它可以通過以下任何一種方式來創(chuàng)建：

float的值不為none

position的值不為static或者relative

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

overflow的值不為visible

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

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

這時候發(fā)現(xiàn)已經(jīng)大致有了點(diǎn)樣子了，效果也看的到，此時典型的三欄布局，左右固定，中間內(nèi)容自適應(yīng)已經(jīng)完成。

總結(jié)：

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

        
Header內(nèi)容區(qū)
    
    

        

            
中間彈性區(qū)
            

                我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容
            
        
        

            
左邊欄
        
        

            
右邊欄
        
    
    

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

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

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

2.給父元素定高

3.利用 overflow:hidden 屬性

    
    
    
    
    



    

        
Header內(nèi)容區(qū)
    
    


        

            

                
中間彈性區(qū)
                

                    我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容我是各種內(nèi)容
                
            
        
        

            
左邊欄
        
        

            
右邊欄
        
    
    

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