常規流
我(I)們通常講的(Of)塊級元素與行内元素的(Of)默認表現，就是它們在(Exist)常規流中的(Of)表現。有一(One)個(Indivual)名爲(For)display的(Of) CSS 屬性可以(By)修改它們的(Of)表現形式。在(Exist)默認情況下，塊級元素的(Of)display屬性值爲(For)block，行内元素的(Of)屬性值爲(For)inline，如果你把某個(Indivual)a元素的(Of)display屬性值改成block，那麽這(This)個(Indivual)a元素就會像一(One)個(Indivual)塊級元素一(One)樣表現自己了。另外還有一(One)個(Indivual)比較特殊的(Of)屬性值爲(For)inline-block，顧名思義是像行内元素那樣排列的(Of)塊級元素，一(One)般情況下，在(Exist)想要(Want)并列排列某些塊級元素的(Of)時(Hour)候，就可以(By)把它們的(Of)display屬性值改成inline-block(無獎問答：爲(For)什麽不(No)直接改成inline呢?)
相對定位
一(One)般的(Of)教程會把相對定位和(And)絕對定位一(One)起放在(Exist)浮動的(Of)前面或者後面，而我(I)選擇這(This)麽安排内容的(Of)原因之一(One)是我(I)想要(Want)強調相對定位的(Of)元素仍然在(Exist)常規流中(事實上W3C标準 http://www.w3.org 也是如此安排目錄的(Of))。
position:relative的(Of)元素就擁有了相對定位的(Of)能力，而用(Use)戶可以(By)通過上下左右(top、bottom、left、right)四個(Indivual)屬性值(但是通常隻使用(Use)top和(And)left，因爲(For)這(This)裏允許使用(Use)負數，right = -left)來(Come)在(Exist)視覺上“推走”這(This)個(Indivual)元素。相對定位最大(Big)的(Of)特點就是，元素的(Of)本體還在(Exist)那裏，而用(Use)戶看到(Arrive)的(Of)則未必(上下左右都不(No)設置或者爲(For)0的(Of)時(Hour)候，元素仍舊在(Exist)那裏)，定位方式是“相對于(At)原位置定位”，因此被稱爲(For)相對定位。而其真正在(Exist)定位上的(Of)應用(Use)，通常不(No)是在(Exist)大(Big)框架的(Of)布局，而是一(One)些小地方、小細節的(Of)微調，而其更常見的(Of)用(Use)法，會在(Exist)下面再次提到(Arrive)。
當然一(One)個(Indivual)超級普通毫無特色常規流塊級元素根本無法滿足我(I)們對豐富布局的(Of)需求，所以(By)出(Out)現了人(People)間大(Big)殺器——float。
浮動
當我(I)們将某個(Indivual)元素的(Of)float屬性改爲(For)left或者right的(Of)時(Hour)候，這(This)個(Indivual)元素就成爲(For)了一(One)個(Indivual)浮動的(Of)塊級元素。
首先它仍然是一(One)個(Indivual)塊級元素(如果它原本是一(One)個(Indivual)内聯元素，那麽此時(Hour)它也變成了塊級元素)——擁有padding、border、margin，可以(By)設置寬高。其次它浮起來(Come)了：
它脫離了常規流
它的(Of)寬度變成了它内容的(Of)寬度
它向着你規定的(Of)方向擠成一(One)堆
這(This)些事意味着什麽呢：
浮動元素的(Of)寬度變成了其内容所需的(Of)最小寬度。如果這(This)個(Indivual)元素裏面還有一(One)個(Indivual)常規塊級元素呢?那就要(Want)看這(This)個(Indivual)常規塊級元素多寬咯(它沒定義寬度，那還是100%)。
浮動元素後面的(Of)常規元素看不(No)見他(He)(因爲(For)他(He)們不(No)在(Exist)同一(One)個(Indivual)“流”裏了)，浮動元素的(Of)父元素也看不(No)見他(He)(視而不(No)見)，隻有行框看得見——文字會繞着它們排列。
浮動元素會按着所規定的(Of)方向一(One)個(Indivual)接一(One)個(Indivual)水平排列，如果水平位置不(No)夠則換到(Arrive)下一(One)行，如果水平位置和(And)垂直位置都還有剩，則會優先往上放。
浮動元素與父元素、浮動元素之間的(Of)内外邊界不(No)會相交。也就是說，浮動元素以(By)及其父元素的(Of)padding、margin區域都不(No)會重疊。
浮動元素的(Of)頂邊不(No)會超過源代碼中它前面出(Out)現元素所生(Born)成行框的(Of)頂。
幾乎所有關于(At)浮動布局可能出(Out)現的(Of)問題，都可以(By)在(Exist)上面這(This)幾條中找到(Arrive)原因。舉個(Indivual)栗子：兩列布局
微博就是最典型的(Of)兩列布局(新版V6的(Of)登錄後首頁變成三列了，不(No)過用(Use)戶頁面仍然是兩列…)，這(This)種兩列式的(Of)布局解決方法很簡單，兩個(Indivual)固定寬度的(Of)div，一(One)起向左浮動，或者一(One)個(Indivual)向左、一(One)個(Indivual)向右。
而在(Exist)很多遊戲網站中，爲(For)了盡可能利用(Use)大(Big)屏幕的(Of)優勢，而把頁面設計成左邊有一(One)個(Indivual)固定寬度的(Of)導航，右側全屏占滿，在(Exist)這(This)種情況下，上面的(Of)寫法就不(No)成立了。不(No)管兩個(Indivual)元素如何浮動，寬度都沒有辦法正好撐滿整個(Indivual)屏幕，雖然 CSS 中的(Of)width(寬度) 屬性可以(By)使用(Use)百分比的(Of)值，但是當你将其設爲(For)100%的(Of)時(Hour)候，它又掉下來(Come)了。此時(Hour)最好的(Of)做法是将左邊欄(第一(One)個(Indivual) div)設爲(For)浮動，并且給一(One)個(Indivual)固定的(Of)寬度(比如200px)。此時(Hour)兩個(Indivual) div 元素在(Exist)同一(One)高度上，但是右側的(Of) div 看不(No)到(Arrive)左側的(Of)那個(Indivual)，内容仍然從左上角開始顯示，此時(Hour)隻要(Want)給這(This)個(Indivual) div 的(Of)margin-left賦值爲(For)200px，就可以(By)将右側div的(Of)左邊200px空出(Out)來(Come)，這(This)樣兩列布局的(Of)基本就完成了。
清除浮動(Clear-fix)
有些人(People)覺得Clear fix被翻譯爲(For)清除浮動并不(No)合适，因爲(For)實際上浮動仍然還在(Exist)(元素仍然漂浮着)，而這(This)個(Indivual)術語的(Of)本意也應該是“清除浮動所造成的(Of)不(No)良影響”，不(No)過在(Exist)中文圈子裏，從 clearfix 方法出(Out)生(Born)伊始，它就被叫做清除浮動了…所以(By)也沒辦法啦╮(╯▽╰)╭。
它所修正的(Of)不(No)良影響，主要(Want)是針對上面的(Of)第二條。浮動元素的(Of)父元素看不(No)到(Arrive)它：如果某個(Indivual)塊級元素裏的(Of)所有子元素都是浮動的(Of)，那麽這(This)個(Indivual)元素自身就不(No)會有高度，在(Exist)需要(Want)設置背景和(And)邊框的(Of)時(Hour)候，這(This)種問題總像幽靈般如影随形。解決方法也很成熟：
另外還有一(One)個(Indivual)“真正的(Of)”清除屬性——clear，在(Exist)上面的(Of)示例中也出(Out)現了，這(This)個(Indivual)屬性規定了該元素的(Of)左側或右側是否可以(By)與浮動元素相鄰——如果規定的(Of)方向有浮動元素，那麽這(This)個(Indivual)元素就會向下排列(到(Arrive)底是有多讨厭人(People)家…)
絕對定位
還有一(One)種比較特殊的(Of)定位方式，被稱爲(For)絕對定位，事實上我(I)們PS文件中的(Of)圖層都是絕對定位。position:absolute的(Of)元素就成爲(For)了一(One)個(Indivual)絕對定位元素，相對定位是相對于(At)元素自身，而絕對定位也是針對元素自身而言——跟自身原本絕對沒關系。
絕對定位的(Of)元素完全脫離了常規流，可以(By)說是“哪個(Indivual)元素都看不(No)見它”。而它仍然需要(Want)一(One)個(Indivual)定位的(Of)“原點”，W3C規定離絕對定位元素最近的(Of)position屬性爲(For)relative、absolute或fixed的(Of)祖先元素的(Of)内容框的(Of)左上角(有一(One)個(Indivual)特例，就是該祖先元素爲(For)行内元素的(Of)時(Hour)候，這(This)裏不(No)展開說明了，基本遇不(No)到(Arrive))，作(Do)爲(For)該元素絕對定位的(Of)原點。因此，其實，相對定位元素(position:relative)通常都被用(Use)于(At)創建絕對定位元素的(Of)包含塊(containing block)，如果你有一(One)個(Indivual)絕對定位元素，而它的(Of)位置跟你預想的(Of)不(No)對，那就是其定位基準出(Out)問題了。而其定位方式一(One)樣，是通過上下左右的(Of)值來(Come)規定的(Of)。
固定定位
position:fixed的(Of)元素就是固定定位元素，本質上它也是一(One)種絕對定位，這(This)種元素會固定于(At)浏覽器窗口的(Of)固定位置，很多網站頂端的(Of)固定導航、右下角的(Of)固定廣告等等都是通過這(This)種方式定位的(Of)。
定位關系
如果某個(Indivual)元素是絕對定位元素(position爲(For)absolute或fixed)，則float屬性對其無效，同時(Hour)元素變爲(For)塊級元素。
而當某個(Indivual)元素的(Of)position不(No)爲(For)static(position:static即爲(For)最普通的(Of)常規流中的(Of)元素)時(Hour)，它們彼此之間就有可能發生(Born)重疊(就像PS圖層一(One)樣，圖層重疊是很常見的(Of))。
在(Exist)源代碼中後出(Out)現的(Of)元素會覆蓋先出(Out)現的(Of)元素
浮 動元素會覆蓋常規流元素
絕對定位元素會覆蓋浮動元素
使用(Use)z-index可以(By)無視上述三條規則z-index屬性可以(By)規定圖層之前的(Of)層疊順序，其數值越大(Big)，該元素越靠“前”(疊在(Exist)所有圖層的(Of)最上面)，如果你發現某個(Indivual)元素無論如何都覆蓋不(No)了，檢查一(One)下它的(Of)z-index屬性值，也許就能找到(Arrive)答案。
Flexible Box(伸縮盒模型)
display:flex的(Of)元素就會應用(Use)伸縮盒模型，它是 CSS 中真正爲(For)布局而生(Born)的(Of)模型。現在(Exist)關于(At)這(This)個(Indivual)模型的(Of)相關文章還很少，而且各種問題也很多，因爲(For)從09年到(Arrive)現在(Exist)，它經曆了3個(Indivual)大(Big)的(Of)版本變化，而這(This)涉及到(Arrive)了大(Big)量手機及IE的(Of)版本兼容問題，導緻很多網站都不(No)願意采取這(This)種布局方式。
使用(Use)這(This)種模型布局進行布局最炫酷的(Of)一(One)點是，我(I)們不(No)用(Use)再費力計算寬度然後爲(For)元素規定寬度，所有的(Of)寬度根據所有可用(Use)空間及内容進行分配，這(This)樣對于(At)個(Indivual)數不(No)固定的(Of)元素也可以(By)實現完美分配。空間分配方式有兩種：
按照盒的(Of)寬度比例分配
按照剩餘空間比例分配
如果上面的(Of)說明有點不(No)清楚，點這(This)裏有一(One)個(Indivual)DEMO，可以(By)通過改變左邊各項屬性的(Of)值看到(Arrive)其結果。如果你們的(Of)項目隻針對最新的(Of)iPhone(iOS7及以(By)上)，你可以(By)考慮拗你們的(Of)前端去嘗試使用(Use)這(This)個(Indivual)模型來(Come)布局(我(I)曾親測過絕大(Big)多數網上流傳的(Of)兼容代碼，全軍覆沒，主要(Want)國(Country)内有UC浏覽器這(This)個(Indivual)大(Big)殺器)。
後
display規定了該元素所應用(Use)的(Of)模型，position規定了該元素的(Of)定位方式，二者共同構成了 CSS 定位與布局的(Of)基礎。另外W3C也提出(Out)了伸縮盒模型用(Use)于(At)滿足複雜多變的(Of)布局需求，并且開始推薦廠商實現，如果各位有需要(Want)，在(Exist)将來(Come)我(I)可以(By)單獨開一(One)篇文章講這(This)部分内容。
