浮動與定位、bfc和ifc

CSS的兩大特性：

層疊性
繼承性： 1、文本樣式
        2、字體樣式
        3、列表樣式
        4、表格樣式

浮動與定位

浮動

clear:left;right;both;清除前面所有元素的浮動對這個元素的影響。
前面元素哪邊浮動就清除哪邊，前面所有元素的浮動都清除時用both。

定位

屬性

position：
    static 沒有定位（默認）
    absolute；絕對定位
    relative；相對定位
    fixed；固定定位
top： 數值；
right： 數值；
bottom： 數值；
left： 數值；
overflow：（設置當元素的內容溢出其區域時發生的事情。）
    visible；不裁剪
    hidden；裁剪
    scroll；裁剪並顯示滾動條
    auto；若內容被裁剪則主動添加滾動條
    inherit；
clip：設置元素的形狀。只針對於一個絕對定義元素
    唯一合法的形狀值是：rect (top, right, bottom, left) 
vertical-align： 元素的垂直對齊方式。
z-index：元素的堆疊順序
    auto； 堆疊順序與父元素相等。（默認） 
    number； 設置元素的堆疊順序。 （數值越大越靠前）

靜態定位

static 沒有定位，元素出現在正常流中（默認）

絕對定位

子元素絕對定位時，它是按第一個絕對定位的父元素定位；
絕對定位不考慮默認的“margin”值。
position: absolute;
top: 數值；
left: 數值；

相對定位

元素相對元素原來（在正常流中）的定位
position: relative;
top: 數值；
left: 數值；

固定定位

相對body定位。
position: fixed;
top: 數值；
left: 數值；

各種定位的原位置

相對定位——原來的位置被保留；
絕對定位、固定定位——原位置被清空；
當頁面內容多右側出現滾動條時，固定定位的元素不會隨滾動條滾動。

隱藏

display： none; ——原有位置被清空
visivility: hidden; ——原有位置被保留

bfc塊級格式化上下文

——block formatting context【塊級格式化上下文（環境）】
bfc中的佈局原則：
1、在bfc環境中所有元素在垂直方向上一個接一個的放置；
2、相鄰盒子(box)在垂直方向上的margin值會重疊；
3、內部盒子會與bfc的左邊(右邊)線接觸，浮動也是這樣；
4、bfc區域不會與浮動盒子重疊；
5、bfc環境中子元素與外界分離，不會影響到外面的元素，而外面的元素也不會影響到bfc裏面的元素；
6、bfc中浮動元素會參與計算。
——觸發bfc——overflow： hidden；

bfc的觸發方式：
float： 值不爲none時；
position： absolute； fixed；
display： inline-block；table-cell；table-caption；flex；inline-flex；
overflow： 不爲visible時；

ifc行級格式化上下文

——inline formatting context【行級格式化上下文（環境）】
1、ifc中的元素會在一行上從左到右排列；
2、在一行上的所有元素會在該區域形成一個行框；
3、行框的寬度爲包含框的寬度，高度爲行框中最高的元素的高度；
4、浮動的元素不會再行框中，並且浮動會壓縮行框寬度；
5、行框的寬度容納不下子元素時，子元素會換到下一行顯示。並會產生新的行框。
6、行框內的元素遵循text-align和vertical-align。

ifc的觸發方式：
1、插入空的行級元素

2、在父元素上插入空白行內爲元素
1）父級：after（/before）{
         content: "";
         font-size: 0px;
         display: inline-block;
         width: 0px;
         height: 100%;
         vertical-align: middle;
2）給所有需要居中的元素添加： vertical-align: middle;