說到兩欄自適應布局，估計很多人看到這樣類似的文章，我經常也看過，但是那些實現方式跟我所經常使用的兩種方法不一樣，經常使用的意思是，我一遇到這種布局，立馬想到的就是使用這種。就像我們拿東西，我們立馬就會想到用手拿，當然還有很多方式可以拿到，比如用嘴刁。 所以，當我們看到多種實現方式的時候，一定要學會比較，然後選擇其中一兩種作為常用布局記到深處，就是想都不用想就用的。
see the pen layouts by wenjie (@wenjie) on codepen.
點選右上角那個 codepen logo可以在新頁面看，大點看對眼睛好
overflow方式主要原理： 固定寬度（block設定了寬度，或者inline-block元素自己的寬度）那一塊浮動起來，放在最前面；自適應那一塊一定要放在最後，寬度不能設定即寬度要為auto，設定overflow為hidden或者scroll等（目的形成bfc。overflow為visible不能形成bfc，其他都可以，自己可以搜尋文章看看）。
table-cel l方式主要原理：原理跟overflow類似，唯一不同的是它設定了乙個很大很大的寬度，由於table-cell有自己的最大寬度，所以我們設定很大是為了 到達它的最大寬度，也就是瀏覽器的邊緣吧。
margin負值在網上寫得風生水起，但個人不是很喜歡使用，我認為它的唯一優點就是能把自適應內容的標籤放在了最前面 ，使seo更友好，因為seo一進來就獲取到了最重要的內容。 但margin負值會增加更多的難度，設定甚至排查問題可能會花更多時間。所以margin負值我就是學一學的姿態，用不用取決於心情。
延展到多欄布局，是一樣的，其實沒啥可說的，就是把所有固定寬度的欄目放在最前面浮動起來，把自適應的部分放在最後即可。
因為用了浮動，所以記得父容器清除浮動，比如我直接用overflow:auto清除浮動、也可以用我們常寫的 class=clearfix。
如果是英文**或者文章裡面有英文 還要考慮長英文單詞的時候，這個時候如果單詞在邊緣就會被截斷，這個時候，自適應的容器就要加上 word-wrap: break-word; 進行處理。
還有其他很多很多種方式，大家隨便一搜就能搜到，比如css3的 calc(100% - x)這個其實我在移動端也經常使用，它的缺點就是舊版瀏覽器的相容問題。
兩欄自適應布局與高度自適應
float bfc 使用 float 讓 left 塊脫離文件流，使用 bfc 規則，讓 right 塊寬度自適應，如下 類似聖杯布局給父元素設定 padding left right 元素寬度 100 left 元素通過 設定 left 和 margin left 屬性拉取到前面 flexflex...
兩欄以及三欄自適應布局
左邊寬度200px,右邊自適應寬度 左右兩邊都絕對定位，父元素相對定位 left right right parent left right 父元素 relative 左邊列 absolute 右邊 absolute,left 100px,right 0 實現自適應 左邊設定margin 可把兩列分...
三欄布局 自適應
趴趴熊，我們走 個人簡介，是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介是求職者向欲供職單位全面 簡潔 條理清晰地自我介紹 自我推薦的文書。簡介是應用寫作學研究的一種日常應用文體。p 個人簡介，是當事人全面而簡潔地介紹自身情況的一種書面表達方式。求職過程中撰寫的個人簡介...