定位屬性

1.clear 規定哪一側不允許元素浮動
left 在左側不允許浮動元素。
right 在右側不允許浮動元素。
both 在左右兩側均不允許浮動元素。
none 預設值。允許浮動元素出現在兩側

2.clip 剪裁絕對定位的元素
clip:rect(上top，右right,bottom下，left左)
左和上：裁掉多少寫多少
右和下：顯示多少寫多少

3.display 規定元素應該生成的框的型別
none 此元素不會被顯示
block 此元素將顯示為塊級元素，此元素前後會帶有換行符
inline 預設。此元素會被顯示為內聯元素，元素前後沒有換行符
inline-block 行內塊元素。（CSS2.1 新增的值）
list-item 此元素會作為列表顯示
run-in 此元素會根據上下文作為塊級元素或內聯元素顯示
table 此元素會作為塊級表格來顯示（類似 table），表格前後帶有換行符
inline-table 此元素會作為內聯表格來顯示（類似

BFC(Block formatting context)

直譯為”塊級格式化上下文”。

BFC佈局規則：
1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此
4.BFC的區域不會與float box重疊
5.BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此
6.計算BFC的高度時，浮動元素也參與計算

BFC觸發方式：
1.根元素
2.float屬性不為none
3.position為absolute或fixed
4.display為inline-block, table-cell, table-caption, flex, inline-flex
5.overflow不為visible

IFC(Inline Formatting Contexts)

直譯為”內聯格式化上下文”，IFC的line box（線框）高度由其包含行內元素中最高的實際高度計算而來（不受到豎直方向的padding/margin影響)

水平居中：當一個塊要在環境中水平居中時，設定其為inline-block則會在外層產生IFC，通過text-align則可以使其水平居中。

垂直居中：建立一個IFC，用其中一個元素撐開父元素的高度，然後設定其vertical-align:middle，其他行內元素則可以在此父元素下垂直居中。

規則：
1.ifc中的元素會在一行中從左到右排列
2.在一行上的所有元素會在該區域形成一個行框
3.行寬的高度為包含框的高度，高度為行框中最高元素的高度
4.浮動的元素不會在行框中，並且浮動元素會壓縮行框的寬度
5.行框的寬度容納不下子元素時，子元素會換到下一行顯示，並且會產生新的行框
6.行框的元素內遵循text-align和vertical-align