大家好，本週和大家分享的主題是CSS進階。CSS不是編程語言，它的語法易懂，使用方便，但同時，利用CSS佈局時我們也常常被CSS裏各種屬性的性質和使用搞得頭暈目眩，完全不知所云（這也是CSS不是編程語言的弱勢，其邏輯性和嚴密性不及編程語言）。因此，要想真正掌握CSS，掌握CSS的進階應用非常必要。話不多說，開始今天的主題，浮動。
相信使用過浮動佈局的同學對浮動是又愛又恨。愛它佈局時帶來的方便，恨它在佈局時產生的“副作用”，怎樣才能擺脫這些“副作用”，正確利用CSS浮動進行佈局呢？我們還是得從浮動的基本使用開始談起。
首先明確一個準則（非常重要，下面的例子都以它爲基礎）：浮動是一種定位模型，浮動的元素可以左右移動，直到它的外邊緣碰到包含框活着另一個浮動框的邊緣。浮動元素脫離文本流，因此，在文檔的普通流中的元素就會表現得像浮動元素根本不存在一樣。
這句話是什麼意思呢？我們來看下面的例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box1{ background-color: red; } .box2{ background-color: blue; } .box3{ background-color: yellow; } .box{ width: 500px; height: 200px; } </style></head><body> <div class="box1 box"></div> <div class="box2 box"></div> <div class="box3 box"></div></body></html> |
現在有三個div元素，分別是box1，box2和box3.在沒有浮動的情況下它們的顯示效果如下圖所示：
變形一：我們給box2添加左浮動，則會出現下面的效果：
咦？box3哪兒去了？消失了嗎？顯然沒有（不信你可以在chrome下用F12打開開發者工具查看）！最終呈現效果是這樣的原因有以下幾點：
1.由於box2設置了左浮動，因此它會脫離文本流，直到它的外邊緣碰到包含框或者另一個浮動元素的邊緣，顯然，這裏只有box2一個元素是浮動的，因此，這裏box2的外邊緣碰到的是包含框，具體而言，這裏的包含框就是body元素的左邊緣。
2.由於box1是塊級元素，因此它會佔領整個height爲200px的區域的所有寬度（即使它自身的寬度只有500px，但該高度內的其它區域仍被它佔據），因此box2不能浮動到box1的右邊，只能浮動到box1下面的左邊緣。即是說，浮動元素的上一個元素如果是標準流中的元素，那麼，浮動元素的頂部總是和上一個元素的底部對齊。
3.由於box2元素浮動，因此在普通文檔流中它不佔位置，因此，box3元素會向上移動，直到其頂部碰到box1元素的底部（即box3位於box1下面），但是由於box2元素是浮動的，它會浮動於普通文本流之上，因此，形成了box2遮擋box3的效果。
變形二：我們給box3也添加左浮動，效果如下：
現在，box3元素出現在box2元素的右邊，原因還是最開始提到的那條準則。因爲現在有box2，box3兩個浮動元素。因此，box3元素的外邊緣在碰到同爲浮動元素box2的邊緣時，停止左浮動。
變形三：現在我們改變三個框的寬度、高度，設置box1高300px，box2，box3高200px，三個box都左浮動，最終的效果如下：
這裏有兩個現象值得注意：
1.box3出現在box1和box2下面
2.box3被box1“卡住”
由於三個box均設置爲左浮動，因此在理想情況下三個box應該是並列爲一行顯示，但是由於每個box寬度爲500px，屏幕寬度爲1368px，顯然第三個box在第一列放不下，因此，box3出現在box1和box2下面。另一方面，由於浮動元素最終停靠在碰到另一個浮動元素邊緣的位置，而這裏box1的高度爲300px，因此box3最終碰到的邊緣是box1的邊緣，因此最終呈現的效果是box3被“卡住”。
變形四：給這三個box加上一個父元素，mainbox（設置其margin-left：200px）。仍然設置僅有box2浮動，效果如下圖所示：(注意和變形一對比)
變形四和變形一唯一的區別就是多了一個帶margin-left的父元素mainbox，但呈現的效果是box2並沒有浮動到頁面的左邊緣，而是出現在距左邊緣200px的位置。原因還是上面的那條準則，浮動元素左移到它的外邊緣碰到包含元素的邊緣爲止（這裏沒有其它的浮動元素，故不考慮碰到其它浮動元素邊緣的情況），而這裏的外邊緣不再是body元素的邊緣，而是mainbox的邊緣，因此有了這樣的效果。
明白了浮動元素浮動的原理，那麼浮動元素還會給其它元素帶來什麼影響呢？我們明天繼續！