摘要：不完全脫離文檔流浮動后的結果當目標標簽的內部有浮動的子級，目標標簽的兄弟標簽的布局會出現顯示異常在不做清浮動的情況下，父級不會獲取子級的高度。

一、文檔流(normal flow)

1.概念

將窗體自上而下分成一行一行，塊級元素從上至下，行內元素在每行中從左至右順序排放元素

本質為normal flow(普通流，常規流)，文檔流就是一個連續具有邏輯上下的頁面整體，也可以片面的說，出現在頁面中的顯示內容都可以理解為在文檔流中。

2.BFC(Block formatting context)

塊級格式化上下文，它是一個獨立的渲染區域，只有Block-level box參與，它規定了內部的Block-level box如何布局，并且這個區域與外部毫不相干。

3.BFC規則

• 內部的Box會在垂直方向，一個接一個的放置
• 根據BFC布局方向，Box自身的水平方向位置，由margin左或右控制，相鄰Box的margin會疊加
• Box的垂直位置，由margin-top控制位置，相鄰Box會發生重疊(margin塌陷)
• 同一容器(區域)中，box相互影響，不對對區域外產生影響。

二、浮動布局

1.目的

讓block同行顯示(1.在父級規定的寬度中，2.不完全脫離文檔流)

2.基本語法

float:left | right

• float：left--->設置BFC橫向布局規則為從左至右，且block box同行顯示之間沒有間隔
• float：right--->BFC規則為從右至左，且block box同行顯示之間沒有間隔

3.浮動布局實例

.box{
    width: 1000px;
    margin: 0 auto;
}
div div{
    font: 900 30px/100px "STSong";
    text-align: center;
    width: 200px;
    height: 100px;
    background-color: green;
    float: left;
    color: white;
}
.b6{
    width: 600px;
    background-color: yellow;
}
.b7{
    width: 400px;
    height: 200px;
    background-color: yellowgreen;
    float: right;
}
.b8{
    width: 300px;
    height: 150px;
    background-color: brown;
    float: left;
}
.b9{
    width: 300px;
    height: 150px;
    background-color: black;
    float: left;
}
.b10{
    width: 400px;
    height: 150px;
    background-color: cyan;
    float: right;
}
.b11{
    width: 600px;

    background-color: red;
    float: left;
}
.b12{
    width: 1000px;
    background-color: blue;
}

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
    
9
    
10
    
11
    
12

效果圖：

4.浮動布局的問題

通常文檔流中，子標簽在父級標簽未設置高度的情況下，會撐開父級的高度，父級的高度決定于邏輯最后位置的子級的低端。

脫離文檔流后的子級標簽，不再撐開父級高度。

不完全脫離文檔流(浮動后的結果)：當目標標簽的內部有浮動的子級，目標標簽的兄弟標簽的布局會出現顯示異常！在不做清浮動的情況下，父級不會獲取子級的高度。

5.清浮動

清浮動的對象：擁有浮動子級的父級

這里只介紹四種清浮動的方法

1.浮動的父級設置高度
super {
    height: npx;
}
2.浮動的父級設置overflow
super {
    overflow: hidden;
}
3.浮動的父級兄弟設置clear
brother {
    clear: left | right | both;
}
4.浮動的父級偽類清浮動
super:after {
    content: "";
    display: block;
    clear: left | right | both;
}

原理：在浮動布局的情況下，讓父級獲得合適的高度。

三、流式布局

1.目的

讓布局脫離固定值限制，可以根據頁面情況的改變發生相應的變化

2.相關設置

百分比設置 %  參考為最近的父級
窗口設置 vw | vh    50vw代表占據窗口寬度50%
字體控制 em rem     em為最近設置字體大小的父級規定的字體大小 rem為html字體大小

四、定位布局

可以根據需求給相應的塊設定相應設置。

1.語法

position屬性指定一個元素的定位類型

設置完定位類型就可以設置top,bottom,left,right四個屬性進行布局。，如果同時設置了top和bottom，top生效，同時設置了left和right，left生效。簡單說就是 左右取左，上下取上

2.相對定位

• 未脫離文檔流
• 以自身原有位置作為參考坐標系
• 方位布局只改變盒子顯示區域，不會改變盒子原有位置(相當于靈魂出竅)
• left=-right，top=-bottom。

優點：父級不會脫離文檔流，滿足所有的盒模型布局

3.絕對定位

• 完全脫離文檔流，不在文檔流中占位，不會撐開父級高度，不會影響兄弟布局，顯示層也永遠高于文檔流
• 以最近定位父級作為參考坐標系，沒有就找html

優點：如果自身已經采用絕對定位布局，那么子級一定參考自身進行定位。

注：如果父級只是輔助子級進行絕對定位,那么一定優選相對定位,因為絕對定位會產生新的BFC,導致盒模型布局會受影響

4.固定定位

• 完全脫離文檔流
• 參考系為文檔窗口，不隨頁面滾動而改變位置

5.z-index

脫離文檔流的標簽，具有z-index屬性，可以用來控制顯示層次的優先級，值為任意正整數

五、Flex布局

1.概念

Flex是Flexible Box的縮寫，意為“彈性布局”，用來為盒狀模型提供最大靈活性。

• 采用Flex布局的元素，稱為Flex容器(flex container)，簡稱“容器”。它的所有子元素自動成為容器成員，稱為flex項目(flex item),簡稱“項目”。
• 水平為主軸(main axis),主軸開始的位置叫做main start，結束位置叫做main end。
• 垂直為交叉軸(cross axis),交叉軸的開始位置叫做cross start，結束位置叫做cross end
• 項目默認沿主軸排列。單個項目占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size

2.容器屬性

1.flex-direction屬性 決定主軸的方向(即項目的排列方向)
flex-direction: row | row-reverse | column | column-reverse;
-- row（默認值）：主軸為水平方向，起點在左端。
-- row-reverse：主軸為水平方向，起點在右端。
-- column：主軸為垂直方向，起點在上沿。
-- column-reverse：主軸為垂直方向，起點在下沿。

2.flex-wrap屬性 定義一條軸線排不下的情況下如何換行
flex-wrap: nowrap | wrap | wrap-reverse;
-- nowrap（默認）：不換行。
-- wrap：換行，第一行在上方。
-- wrap-reverse：換行，第一行在下方。

3.flex-flow屬性 是flex-direction屬性和flex-wrap屬性的簡寫形式，默認為row nowrap
flex-flow:  ;

4.justify-content屬性 定義了項目在主軸上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;

5.align-items屬性 定義項目在交叉軸上如何對齊
align-items: flex-start | flex-end | center | baseline | stretch;

6.align-content屬性 定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

3.項目屬性

1.order 屬性 定義項目的排列順序。數值越小，排列越靠前，默認為0。
order: ;

2.flex-grow 屬性 定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大。
flex-grow: ; /* default 0 */

3.flex-shrink 屬性 定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。
flex-shrink: ; /* default 1 */

4.flex-basis 屬性 定義了在分配多余空間之前，項目占據的主軸空間（main size）。
flex-basis:  | auto; /* default auto */

5.flex 屬性 是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto。后兩個屬性可選。
flex:   

6.align-self 屬性 允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch。
align-self: auto | flex-start | flex-end | center | baseline | stretch;

六、響應式布局

1.概念

響應式布局就是一個網站能夠兼容多個終端。

原則：采用響應式布局的樣式塊，基本樣式塊只做共性設置，需要根據頁面尺寸進行適應變化的樣式均有響應式布局處理

2.頁面寬度

• 小于寬度

@media only screen and (max-width: ) {
    selector {
        
    }
}

• 大于寬度小于寬度

@media only screen and (min-width: ) and (max-width: ) {
    selector {
        
    }
}

• 大于寬度

@media only screen and (min-width: ) {
    selector {
        
    }
}

3.注

• 在響應式布局內，css語法同正常樣式表語法一樣
• 響應式布局之間存在不同屏幕尺寸的限制，使用樣式相互不影響。滿足當前屏幕尺寸時，該樣式塊起作用，不滿足時則失效
• 當響應式布局中樣式快起作用時，會與正常樣式快設置一起協同布局，遵循選擇器的優先級規則