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

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

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

    
        
我是h1
        
我是div
    

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

    
        我是a
        我是span
    

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

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

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

我是div1
我是div2

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

什么是層級(jí)布局模型？

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

絕對(duì)定位(position: absolute)

相對(duì)定位(position: relative)

固定定位(position: fixed)

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

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

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

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

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

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

方法一：

 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.左浮動(dòng)，右邊用margin-left長(zhǎng)度為左邊的固定寬度，寬為100%

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

float的值不為none

position的值不為static或者relative

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

overflow的值不為visible

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

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

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

總結(jié)：

其實(shí)這個(gè)布局已經(jīng)有點(diǎn)年頭（圣杯布局），通過(guò)左右兩塊DIV來(lái)遮擋了中間div寬度為100%的區(qū)域，
然后壓縮了三個(gè)DIV共有的父容器，來(lái)實(shí)現(xiàn)對(duì)中間內(nèi)容展示的完善，也使左右2個(gè)不在遮擋中間了。
然后我又趁機(jī)試了下z-index屬性，這里有個(gè)小問(wèn)題要注意（要讓z-index起作用有個(gè)小小前提，
就是元素的position屬性要是relative，absolute或是fixed）
我之前的想法是讓中間的內(nèi)容置于頂層，不受div會(huì)因?yàn)槟撤Nhack導(dǎo)致位置變更遮擋了中間內(nèi)容。
只需要設(shè)置下z-index屬性值即可，左右可不設(shè)置，也可以設(shè)置以防萬(wàn)一，不同瀏覽器對(duì)z-index的默認(rèn)值解析不同，可能會(huì)導(dǎo)致問(wèn)題。
基本的布局架構(gòu)就是如此，根據(jù)實(shí)際項(xiàng)目需求在此架構(gòu)上完善，或者以后遇到這種類似的問(wèn)題能打開(kāi)思路，便算是有點(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)容塊被遮擋的問(wèn)題
圣杯用padding的思路，使之壓縮，但是父容器壓縮，左右DIV位置變更，只能用相對(duì)位置進(jìn)行l(wèi)eft
設(shè)置位移為元素寬度來(lái)調(diào)整
而雙飛翼的路線為采用的方式相比圣杯的父容器padding，
改變的是中間內(nèi)容的內(nèi)層div的外邊框，相對(duì)來(lái)說(shuō)對(duì)布局的破壞不大，
但是要采用這種方式又不破壞頁(yè)面結(jié)構(gòu)，就只能在中間內(nèi)容div內(nèi)部的再加個(gè)DIV設(shè)置margin或padding.
使之內(nèi)容變相“壓縮”等同padding效果，并且不會(huì)改變中間內(nèi)容DIV外部的結(jié)構(gòu)，只是內(nèi)部的。
細(xì)心的人留意下我注釋的代碼，這里其實(shí)還有個(gè)CSS浮動(dòng)的樣式問(wèn)題，出現(xiàn)這種情況有各種方式清除浮動(dòng)，
我就不多講解。大概有6種。

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

     新浪使用方式
        .clearfix:after{ 
            content: "";
            display: block;
            clear: both;
            height: 0;
            visibility: hidden;
        }
        .clearfix:after{  /*最簡(jiǎn)方式*/
            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)容
                
            
        
        

            
左邊欄
        
        

            
右邊欄
        
    
    

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