一、網頁布局方式
1、什么是網頁布局方式 ？
布局可以理解為排版，我們所熟知的文本編輯類工具都有自己的排版方式，比如word，nodpad++等等 而網頁的布局方式指的就是瀏覽器這款工具是如何對網頁中的元素進行排版的
2、網頁布局/排版的三種方式
標准流
浮動流
定位流
二、標准流
標准流的排版方式，又稱為：文檔流/普通流，所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
# 1 瀏覽器默認的排版方式就是標准流排版方式
# 2 在CSS中將元素分為三類：分別是
塊級
行內
行內塊級
# 3 在標准流中有兩種排版方式，一種是垂直排版，一種是水平排版
垂直排版，如果元素是塊級元素，那么就會垂直排版
水平排版，如果元素是行內元素或行內塊級元素，那么就會水平排版
三、浮動流
浮動流是一種半脫離標准流的排版方式
1、脫離文檔流
1、 什么是脫離文檔流？
（1）浮動元素脫離文檔流意味着
不再區分行內、塊級、行內塊級，無論是什么級的元素都可以水平排版
無論是什么級的元素都可以設置寬高
綜上所述，浮動流中的元素和標准流總的行內塊級元素很像
（2）浮動元素脫標文檔流意味着
當某一個元素浮動走之后，那么這個元素看上去就像被從標准流中刪除了一樣，這個就是浮動元素的脫標
如果前面一個元素浮動走了，而后面一個元素沒有浮動，那么垂直方向的元素會自動填充，浮動元素重新歸位后就會覆蓋該元素
2、注意點：
（1）浮動流只有一種排版方式，就是水平排版，它只能設置某個元素左對齊或者右對齊，沒有居中對齊，也就是沒有center這個取值
（2）一旦使用了浮動流，則margin:0 auto;失效
ps:讓兩個元素顯示到一行，有兩種實現方式，一種是修改元素的顯示方式為inline-block，另外一種就是用浮動的方式
2、半脫離文檔流
1、什么是半脫離文檔流？
脫離分為：半脫離與完全脫離，
其中完全脫離指的是元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣
而之所以稱為半脫離：是因為浮動元素浮動之后的位置取決於它在浮動之前的標准流中的位置，跟標准流還是有一定的關系，比如說浮動的元素在浮動之前處於標准流的第二行，那么他浮動之后也是處於浮動流的第二行，不會去找其他行的浮動元素去貼靠，打一個比方就是：浮動流就是在標准流上面覆蓋的一層透明薄膜，元素浮動之后就會被從標准流中扔到浮動流這個薄膜上，他在這個薄膜上的位置還是以前在標准流的位置上找同方向的浮動元素進行貼靠，貼靠的准則就是：
（1）同一個方向上誰先浮動，誰在前面
（2）不同方向上左浮動找左浮動，右浮動找右浮動
ps:(1)浮動元素浮動之后的位置取決於它在浮動之前的標准流中的位置
(2)同一個方向上誰先浮動，誰在前面
(3)不同方向上左浮動找左浮動，右浮動找右浮動
3、浮動元素貼靠問題
當父元素的寬度足夠顯示所有元素時，浮動的元素就會並列顯示
當父元素的寬度不足夠顯示所有元素時，浮動的元素就貼前一個元素，如果還不夠，就會再貼前一個元素
直到貼到父元素左邊，此時無論是否寬度足夠都會在這一行顯示了
4、浮動元素字圍現象
沒有浮動文字、圖片、超鏈接等元素會給浮動的元素讓位置，並圍繞在浮動元素的周圍
ps:只要是行內塊級元素，都會有字圍效果
5、浮動流排版練習
#注意：在企業開發中，如何對網頁進行布局
#1、垂直方向的布局用標准流布局，水平方向用浮動流布局
#2、從上至下布局
#3、從外向內布局
#4、水平方向可以先划分為一左一右再對左邊后者右邊進一步布局
6、浮動元素高度問題(又稱父級塌陷)
#1、在標准流中,內容的高度可以撐起父元素的高度
#2、在浮動流中,浮動的元素是不可以撐起父元素的高度的，當子元素都浮動起來后，父親的內容高度即height變為0，父元素就好像塌陷了一樣，因而又稱為父級塌陷
7、清除浮動