四種兩欄式佈局

先分別介紹float、position、flex和table

1.float屬性指定一個盒子（元素）是否應該浮動。

在早期瀏覽器當中，文件型別基本都是圖片加文字進行頁面展示。float屬性最開始的設計是想讓文字環繞圖片
例如這樣：

而開發人員無意中利用它做了一些本不應該是float設計時的工作，於是早期的頁面佈局一般都是float佈局。例如讓兩個塊級盒子在一行顯示。

2.position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的型別

absolute    
生成絕對定位的元素，相對於 static 定位以外的第一個父元素進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

fixed   
生成固定定位的元素，相對於瀏覽器視窗進行定位。
元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative    
生成相對定位的元素，相對於其正常位置進行定位。
因此，"left:20" 會向元素的 LEFT 位置新增 20 畫素。

static  預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 宣告）。
 

3.flex 這是一個新朋友，但是如果你學好了這個屬性，碰見任何佈局都不帶慫的（這裡我的語氣要降低點，因為我也不是那麼肯定~~）。總之這是一個非常好用的屬性，詳細的細節以後再說，實在是屬性太多，這裡簡單說幾個屬性。

    首先你必須要給父級新增一個display:flex屬性，來確認當前元素是一個彈性盒子！！【這是最關鍵】
    好了接下來簡單說說子元素的屬性
    flex-grow   一個數字，規定專案將相對於其他靈活的專案進行擴充套件的量。
    flex-shrink 一個數字，規定專案將相對於其他靈活的專案進行收縮的量。

因為屬性實在太多，所以先說這麼多

4.table 這是由html內的table標籤轉化而來的
這裡呢，我只說兩個屬性。display:table和display:table-cell

display:table對應的是html內table
dispaly:table-cell對應的是html內td

這裡只是打個比方，對於那些想說“為什麼要打比方，比方是無辜的”，同學請你出去！~~

好了，開個玩笑。總算是鋪墊了點東西，開始進入今天的正題兩欄式佈局

一、利用float配合margin( position也一樣需要這個屬性進行配合)
那可能就有同學問了為什麼不用padding或者border呢？這裡考慮到有些同學習慣整體用box-sizing:border-box。而一旦用了這個，盒子的的border和padding就屬於盒子自身的size了。
哎~~另外如果用border的話還要給border-color透明。所以這裡推薦使用margin!!
好了，到了激動人心的時刻了，上程式碼！！！（注：此處應該有掌聲）

 <style> 
        .box div{
            height:100px;
        }
        .left{
            width:200px;
            float: left;
            background-color:pink;
        }
        .right{
            margin-left:200px;
            background-color:yellow
        }
    </style>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

是不是很驚奇？有人問了，這麼短的程式碼就能實現我要兩欄佈局？我可以鄭重的告訴你，或許別人不行，但是！！！集才華與美貌的我，就只要這幾行程式碼~~~

那個~~只是活躍一下氣氛啊。。
現在講講它的注意事項。第一，float必須放在第一個子元素。第二margin的方向必須同float方向，第三margin的值必須等於float元素的寬（這一點根據實際開發情況來定，一般專案開發兩欄之間是需要間距的，這個時候可酌情多個10-20畫素）

emm,我最近在群裡看到有些同學並沒有給margin值(備註：這個群呢，是我在網上報的一所前端培訓機構–渡一教育。有興趣的同學可以搜一下)，其實也是可以的，但是並不完美，如果不給margin值，第二個子元素將會是父級的寬，但是文字內容會繞開float，就像我之前說的文字圍繞圖片，如果一旦第二子元素內又有一個塊級元素呢？而我要將他完整展現出來呢？這是有缺陷的，所以說希望同學們能加上margin。

二、利用position配合margin
原理呢，和float一樣這裡就不重複說了。直接上程式碼~~

 <style>
        .box{position: relative}
        .box div{
            height:100px;
        }
        .left{
            width:200px;
            position: absolute;
            left:0;
            background-color:pink;
        }
        .right{
            margin-left:200px;
            background-color:yellow
        }
    </style>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

你沒有看錯，還是這麼短的程式碼。是不是很驚訝，只要998，程式碼帶回家！！！

一如既往的皮一下~~下面講講注意事項
第一，和float一樣，必須是第一個子元素，當然如果給它加上top:0的話可以隨意，其實如果只是定位在左邊的話，我left:0也不會寫。顯得程式碼逼格高，如果你要向右那就要加right了。第二，像之前說的float可以不加margin，只能顯示文字。這position是不存在的,文字不會環繞定位元素，所以小夥伴們還是都加上margin吧。第三點與float一樣。

三、display:flex與flex-grow(比起float，position的搭配，人家這才是兩兄弟，之前那兩貨只能算是半路夫妻)
display:flex需要給予父級，flex-grow放置自適應的子元素。（IE10一下不支援）這裡不說太多直接上程式碼~~

  <style>
        .box{display: flex}
        .box div{
            height:100px;
        }
        .left{
            width:200px;
            background-color:pink;
        }
        .right{
            flex-grow:1;
            background-color:yellow
        }
    </style>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
    </div>

一如既往的少…那啥，就不吹了。怕被揍。。。一下省略一萬字描述我的才華與美貌

下面說說優點於注意事項：

第一，與float、position相比flex佈局的好處在於不需要寫寬度和margin相匹配了，這裡只要求你寫入一個固定寬度，flex-grow會自動將你剩下的補全。第二，你可以在任何地方插入，順序是你寫入的順序，比如你寫三欄佈局，要求兩側固定寬度200px，中間自適應。你只需要將兩側設定寬度，中間給予flex-grow就OK了。與之前兩個相比較，還有一個好處就是，如若你的兩個子元素，高度不統一，這個時候，給兩個子元素vertical-align: middle;可以讓兩個子元素水平對齊。是不是感覺很神奇，我可以很不負責任的告訴你，flex佈局的強大之處遠不至此。想了解的話，關注後期更新

四、display:table和display:table-cell
display:table 給予父級，display:table-cell給予兩個子集，這裡程式碼如下：

    .box{display: table}
        .box div{
            display: table-cell
        }
        .left{
            min-width:200px;
            background-color:pink;
        }
        .right{
            width:100%;
            background-color:yellow;
        }
    </style>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div style="height:100px"></div>
        </div>
    </div>

這個是我很喜歡的一種佈局方式，說說他的優點
第一，你不需要給高，他們自適應的選出你兩個子元素最高的作為公共高度（我程式碼內有一個高100px的div是為了撐起div,如果有內容的話，高度將會是內容高度），第二，甚至你可以不給寬，這裡以為我講的是兩欄佈局，所以我給了第一個子元素一個200px最小寬度，如果說你內容寬度超過了200px,他將讓你的第一個子元素的寬度等於內容寬度。我認為這是自適應的最高境界！！第三，如果你想文字水平居中可以新增vertical-align:middle;

是不是感覺這種佈局和之前三個寫法不太一樣，下面是點私貨，與其他三種一樣的佈局，只新增一個子元素屬性：

    <style>
        .box{display: table;width: 100%}
        .left{
            display: table-cell;
            width:200px;
            background-color:pink;
        }
        .right{
            width: 100%;
            background-color:red;
        }
    </style>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div style="height:100px"></div>
        </div>
    </div>

這樣看起來是不是就和之前三種佈局寫法類似了~~~

我第一次接觸這個屬性來自於bootstarp的input-group元件，當我去看這個元件的屬性時是真的被吸引住了，當然這個元件需要合適的地方才能發揮出他強大的一面，大家有興趣的可以去看看bootstarp的input-group元件。

本次分享到這裡就該介紹了，這是鄙人第一次寫分享文章，有哪些地方沒講的清楚或錯誤的地方，還請留言撥正。謝謝大家的閱讀