在進行網頁佈局時往往需要爲各部分進行定位，在CSS中有一種非常方便的方法，那就是“浮動float”
我們舉一個小例子：有三個div塊，它們長寬顏色不一，依次是紅、黃、綠。如圖（初始狀態1.1）。
首先我們應該知道一個知識點：div是一種塊狀元素，一個div獨佔一行。所以三個div合在一起會成三行的佈局，從上往下依次是紅色、黃色、綠色。
現在要讓它們“飄起來”。
我們在第一個色塊（紅色）上添加左浮動 “float:left;” 我們將會看到黃色色塊消失，綠色色塊減半。不要驚慌，這只是紅色將它們給遮蓋了。如圖（第一個添加浮動樣式1.2）所示。
在網頁佈局中，各種元素大都是服從文檔流的，它們按照次序在網頁中擺放，現在紅色色塊被添加了浮動樣式，那麼它將從文檔流中“飄出去”，而它原本所佔據的高度塌陷，排在它後面的色塊將會佔據它的位置。
就如同排隊一樣，本來是ABC一支隊伍，現在A突然離開了隊伍，站在了隊伍的旁邊，那麼B和C將會補齊A的空位。
若把黃色、綠色也添加上浮動效果，會是如何排列？
和剛剛ABC排隊的例子一樣，A已經離開了原隊伍，並在旁邊開闢了新的隊伍，現在把BC也“浮動”出去，那麼B和C將會跟在A的後面重新排隊。
所以，如果同時在紅黃綠三個色塊上加左浮動，它們將會重新排列成隊，只不過這次是成橫排排列。如圖（三塊全浮動1.3）所示。
這樣我們就達成了浮動的目的。因爲是左浮動，所以從左到右依次排列，如果設置右浮動，那麼紅色將靠最右，往左依次是黃、綠。
還沒完，我們繼續更換浮動的色塊。
還以最初狀態爲起點，這一次我們只在黃色和綠色上面添加浮動效果，紅色無浮動。
將會出現黃色和綠色並排，紅色在最上的情況，如圖（只浮動黃綠1.4）。
前端編程知識分享：5分鐘搞懂“CSS浮動”原理，頁面佈局不再頭痛
那麼你可能有疑問了，不是說好的浮動就是脫離文本流，那麼黃色爲什麼沒有浮動到最上方？而依然受到紅色位置的制約。
這裏就產生了一個規定：黃色是左浮動狀態，如果它的前方（紅色）也是左浮動狀態，那麼黃色將會左飄到紅色的右側。但如果紅色不是浮動狀態，那麼黃色將被死死頂着，無法向上飄動。
下面的綠色色塊就驗證了這條規定的前半部分。
不知道你是否看懂了？我們現在換個思路，倒着來一遍。還是剛纔的三個色塊，給你一個結構，你能不能想明白誰上面加了浮動？如圖（猜猜誰浮動了1.5）。
給我們看到的結果是：黃色色塊消失了，綠色被“歪三倒四”的接上。
本來黃色就比紅色小，那麼很顯然，黃色色塊一定是被紅色遮蓋，紅色色塊一定是添加了浮動，原來的位置塌陷，導致黃色色塊被安排上去。
那綠色色塊爲什麼出現在這裏？我們先找出黃色的位置，如圖（找一找結構1.6）所示。
我們找到黃色的位置，發現綠色的頭頂就是黃色的底部，再結合上面的推論，紅色左浮動，黃色無浮動。綠色又跟在紅色的右邊，很顯然綠色和紅色都是浮動狀態。
不過綠色無法飄到最上方，因爲我們知道div是塊狀元素，獨佔一行，再結合剛剛那條規定，所以綠色只能委屈在黃色的下方。