一、傳統網頁版面的三種方式
網頁佈局的本質：用CSS 來擺放盒子，把盒子擺放到對應位置。
CSS 提供了三種傳統佈局方式（簡單說就是盒子如何進行排列）。
（1）普通流（標準流）
（2）浮動
（3）定位
這裡指的只是傳統佈局，其實還有一些特殊進階的佈局方式。
二、標準流（普通流/文檔流）
所謂的標準流：就是標籤按照規定好的預設方式排列。
（1）區塊級元素會獨佔一行，從上向下順序排列。
（2）行內元素會依照順序，由左至右順序排列，碰到父元素邊緣則自動換行。
以上都是標準流佈局，我們前面學習的就是標準流，標準流是最基本的佈局方式。
這三種佈局方式都是用來擺放盒子的，盒子擺放到合適位置，佈局自然就完成了。
注意： 實際開發中，一個頁面基本上都包含了這三種佈局方式（後面行動端學習新的佈局方式） 。
三、為什麼需要浮動？
問：我們用標準流能很方便的實現如下效果嗎？
1. 如何讓多個塊級盒子（div）水平排列成一行？
雖然轉換為行內塊元素可以實現一行顯示，但是他們之間會有大的空白縫隙，很難控制。
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>行內區塊中間有縫隙</title><style>div{width:150px;height:200px;background-color:#d87093;display:inline-block;}</style></head><body><div>1< /div><div>2</div><div>3</div></body></html>運行結果：
2. 如何實現兩個盒子的左右對齊？
有許多的佈局效果，標準流程沒有辦法完成，此時就可以利用浮動完成佈局。 因為浮動可以改變元素標籤預設的排列方式。
浮動最典型的應用：可以讓多個區塊級元素一行內排列顯示。
網頁版面第一準則：多個區塊級元素縱向排列找標準流，多個區塊級元素橫向排列找浮動！
<!doctypehtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>多個區塊級元素橫向排列找浮動</title><style>div{float:left;width:150px;height:200px;background-color:#d87093;}</style></head><body><div >1</div><div>2</div><div>3</div></body></html>運行結果：
四、什麼是浮動？
float 屬性用於建立浮動框，將其移動到一邊，直到左邊緣或右邊緣觸及包含區塊或另一個浮動框的邊緣。
文法:
選擇器{float:屬性值;}舉例：
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width, initial-scale=1.0><title>Document</title><style>/*浮動的標籤頂對齊*//*浮動:在一行排列,寬高生效--浮動後的標籤具備行內塊特徵*/. one{width:100px;height:100px;background-colo r:pink;float:left;margin-top:50px;}.two{width:200px;height:200px;background-color:skyblue;float:left;/*因為有浮動,不能生效-盒子無法水平居中* /margin:0auto; }.three{width:300px;height:300px;background-color:orange;}</style></head><body><div>one</div><div>two</div><div>three </div></body></html>運行結果：
