浮動(float)，一個我們即愛又恨的屬性。愛，因?yàn)橥ㄟ^浮動，我們能很方便地布局； 恨，浮動之后遺留下來太多的問題需要解決，特別是IE6-7（以下無特殊說明均指 windows 平臺的 IE瀏覽器）。也許很多人都有這樣的疑問，浮動從何而來？我們?yōu)楹我宄樱壳宄拥脑硎鞘裁矗勘疚膶⒁徊揭徊降厣钊肫饰銎渲械膴W秘，讓浮動使用起來更加得心應(yīng)手。
一、清除浮動 還是 閉合浮動 （Enclosing float or Clearing float）？
很多人都已經(jīng)習(xí)慣稱之為清除浮動，以前我也一直這么叫著，但是確切地來說是不準(zhǔn)確的。我們應(yīng)該用嚴(yán)謹(jǐn)?shù)膽B(tài)度來對待代碼，也能更好地幫助我們理解開頭的三個問題。
1）清除浮動：清除對應(yīng)的單詞是 clear，對應(yīng)CSS中的屬性是 clear：left | right | both | none；
2）閉合浮動：更確切的含義是使浮動元素閉合，從而減少浮動帶來的影響。
兩者的區(qū)別 請看優(yōu)雅的 Demo
通過以上實(shí)例發(fā)現(xiàn)，其實(shí)我們想要達(dá)到的效果更確切地說是閉合浮動，而不是單純的清除浮動，在footer上設(shè)置clear：both清除浮動并不能解決warp高度塌陷的問題。
結(jié)論：用閉合浮動比清除浮動更加嚴(yán)謹(jǐn)，所以后文中統(tǒng)一稱之為：閉合浮動。
二、為何要清除浮動？
要解答這個問題，我們得先說說CSS中的定位機(jī)制：普通流，浮動，絕對定位 （其中"position:fixed" 是 "position:absolute" 的一個子類）。
1）普通流：很多人或者文章稱之為文檔流或者普通文檔流，其實(shí)標(biāo)準(zhǔn)里根本就沒有這個詞。如果把文檔流直譯為英文就是 document flow ，但標(biāo)準(zhǔn)里只有另一個詞，叫做 普通流 （normal flow)，或者稱之為常規(guī)流。但似乎大家更習(xí)慣文檔流的稱呼，因?yàn)楹芏嘀形姆g的書就是這么來的。比如《CSS Mastery》，英文原書中至始至終都只有普通流 normal flow（普通流） 這一詞，從來沒出現(xiàn)過document flow （文檔流）
2）浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。浮動框不屬于文檔中的普通流，當(dāng)一個元素浮動之后，不會影響到 塊級框的布局而只會影響內(nèi)聯(lián)框（通常是文本）的排列，文檔中的普通流就會表現(xiàn)得和浮動框不存在一樣，當(dāng)浮動框高度超出包含框的時候，也就會出現(xiàn)包含框不會 自動伸高來閉合浮動元素（“高度塌陷”現(xiàn)象）。顧名思義，就是漂浮于普通流之上，像浮云一樣，但是只能左右浮動。
正是因?yàn)楦拥倪@種特性，導(dǎo)致本屬于普通流中的元素浮動之后，包含框內(nèi)部由于不存在其他普通流元素了，也就表現(xiàn)出高度為0（高度塌陷）。在實(shí)際布局中，往往這并不是我們所希望的，所以需要閉合浮動元素，使其包含框表現(xiàn)出正常的高度。