1. 頁面常用布局
常用的頁面布局方式主要有：浮動，彈性盒子，定位，設置表格模式，行內與塊級相結合。
| 布局方式 |
Float |
flex |
position |
table |
block&Inline-block |
| 兼容性 |
IE4 |
IE10 |
IE7 |
IE8 |
IE8 |
| 注意 |
清除浮動 |
設置自適應子容器與父容器 |
嵌套使用,各中關系 |
內容會自適應 |
效果有局限性，行內塊之間有縫隙 |
1.1.浮動布局（Float）
| 值 |
描述 |
| left |
元素向左浮動。 |
| right |
元素向右浮動。 |
| none |
默認值。元素不浮動，並會顯示在其在文本中出現的位置。 |
| inherit |
規定應該從父元素繼承 float 屬性的值。 |
注意： 絕對定位的元素忽略float屬性！
為什么要清除浮動？
頁面的元素定位機制分為：普通文檔流，浮動，絕對定位 （其中"position:fixed" 是
"position:absolute" 的一個子類）。
1）普通流：很多人或者文章稱之為文檔流或者普通文檔流，其實標准里根本就沒有這個詞。如果把文檔流直譯為英文就是 document flow ，但標准里只有另一個詞，叫做 普通流 （normal flow)，或者稱之為常規流。但似乎大家更習慣文檔流的稱呼，因為很多中文翻譯的書就是這么來的。比如《CSS Mastery》，英文原書中至始至終都只有普通流 normal flow（普通流） 這一詞，從來沒出現過document flow （文檔流）
正常文檔流示例圖：（元素以自然順序從上自下從左自右，塊級占整行，行內元素據內容占位原則。）
2）浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動之后，不會影響到 塊級框的布局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，會導致本屬於普通流中的元素浮動之后，包含框內部由於不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。在實際布局中，往往這並不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。
使用浮動布局方式，一定要記得清楚浮動，不清楚浮動有可能導致元素重疊，或其他兼容問題。
基本左、右浮動示例：
常用清除浮動的辦法：
2.1) 添加額外標簽
通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，其他標簽br等亦可。
缺點：可以想象通過此方法，會添加多少無意義的空標簽，有違結構與表現的分離，在后期維護中將是噩夢，這是堅決不能忍受的，所以你看了這篇文章之后還是建議不要用了吧。
2.2) 父元素設置 overflow：hidden
原理來自於塊級格式化上下文，此方法會使溢出內容隱藏
2.3）父元素設置overflow:auto
原理來自於塊級格式化上下文，此方法在多個嵌套后，firefox某些情況會造成內容全選。元素內容超出時會使其顯示導致樣式錯亂。
2.4）使其父元素也設置浮動
會導致與父元素相鄰的元素的布局會受到影響，不可能一直浮動到body，不推薦使用
2.5）父元素設置display:table
使用此方法父元素會具有table表格相應屬性根據內容自適應，有可能與布局樣式不符。
2.6）使用:after 偽元素
其原理與加空標簽一樣，用偽元素可以精簡代碼，優雅dom
聊聊塊級格式化上下文BFC
BFC是block formatting context,在文檔流的類型中，普通文檔流屬於FC，而BFC可以理解為一種占位的普通文檔流。它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何布局，以及和其他元素之間的關系和作用。
滿足下列條件之一就可觸發BFC
【1】根元素，即HTML元素
【2】float的值不為none
【3】overflow的值不為visible
【4】display的值為inline-block、table-cell、table-caption
【5】position的值為absolute或fixed
效果分享：
http://www.cnblogs.com/xiaohuochai/p/5248536.html
1.1.定位position
定位文檔流：在使用position這個屬性時，分兩種情況。
（1） 當position:relative時，並沒有脫離普通文檔流，元素根據top,right,left,bottom值相對自身定位，元素本身所占的位置會保留。
示例效果圖：
（2） 當position:absolute;與position:fixed;時，元素脫離普通文檔流，不再占據位置，類似一個漂浮層。absolute定位是相對於自己最近的“祖先元素”定位。Fixed定位是相對於瀏覽器窗口進行定位的。
Absolute示例：
1.2.彈性布局flex
彈性布局不會脫離普通文檔流，也不會改變當前元素的定位，它是一個自適應的伸縮容器。
Flex的應用可參考微信移動端布局框架WeUI
此處的示例主要用於做橫向布局,flex也可用於縱向布局，此處不做過多示例，可參考官方文檔中相關屬性。
1.3.設置表格布局display:table
設置display:table的元素會被以作為塊級表格來顯示，前后自帶換行符。
在html4中<table></table>標簽的js源碼中可以了解到，也是利用css中display:table來實現的。而在布局中，我們選中display:table而不是<table></table>來布局，是為了取長補短。
舉個例子：
某個元某的高度是動態獲取的，若想讓內容始終垂直居中。可以利用父元素display:table;子元素display:table-cell;(如<td></td>) vertical-align:middle;即可。
常見的框架如boostrap的柵格就是利用display:table來做的。
效果可見網頁： http://demo.cssmoban.com/cssthemes4/btts_47_binary-Admin-v1.1/index.html
1.4.設置block&Inline-block
通過html標簽與css中block或inline-block相結合也可以現實一系列的布局效果。
注：被設置inline-block的元素與元素之間會產生微小的間隙
例：因為有間隙，導致父元素的寬度放不下兩個寬度為50%的子元素，被擠到下方
。
將子元素寬度調整為49%時。
若想要去掉中間的間隙方法有很多。分享文章：http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-%E5%8E%BB%E9%99%A4%E9%97%B4%E8%B7%9D/
2.樣式重構要點
1．在做基礎布局時盡量避免多種布局方法交互使用。定位方式只在必要時使用。
2．所有的浮動都要清楚
3．做好公共樣式和功能模塊樣式的分離。
4．初始編寫公共樣式時不要“內容化”。注：在之前傳統的靜態頁面開發時，我們都要求見名知意，許多開發人員喜歡將‘內容為主，展現為輔’的原則作為樣式的命名規則之一。但是在做公共樣式時應與之相反。因為一套公共樣式會運用到多個頁面，多個組件中，若某個三欄布局的class被命名為 .foot-3 當此布局樣式運用到頭部菜單欄時，就會很奇怪。同時會增加后期維護人員的難度，誤導理解。
5.在修改公共樣式時，每修改一次，都應在相應位置添加注釋，便於維護。
6.編寫功能模塊樣式時，命名內容化，便於理解。樣式應該用最外層容器包裹，避免樣式的沖突。注：最外層容器千萬不能以.content式命名，應如.emial-w表式郵箱外層。
7.樣式的嵌套建議不超過5層。盡量避免用+ > # 此類的選擇器，最好統一使用.class以防破壞樣式的優先級。
優先級計算：
1）id選擇器 100
2）類選擇器，屬性選擇器，偽類選擇器 10
3）元素和偽元素 1
4）通配選擇器* 0
5）!important 權重沒有值，優先級最高，方便記憶設成10000