前端佈局用的最多的是float：脫離文件流，浮動起來。浮動的框可以左右移動，直到遇到另一個浮動框或者遇到外邊緣的包含框（bcf）。正是因為當元素浮動之後，不會影響塊級元素的佈局，只會影響內聯元素佈局，會造成父級元素高度坍塌。此時文件流中的普通流就會表現得該浮動框不存在一樣的佈局模式。當包含框的高度小於浮動框的時候，此時就會出現高度塌陷。即為何我們需要清楚浮動。
left
right
div2
left
right
div2
優點：簡單，**少，瀏覽器支援好，不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動佈局多，就要增加很多空div，讓人感覺很不爽
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
評分：★★★☆☆
left
right
div2
優點：簡單，**少，容易掌握
缺點：只適合高度固定的佈局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的佈局時使用
評分：★★☆☆☆
left
right
div2
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單，**少，瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用
評分：★★★☆☆
left
right
div2
優點：簡單，**少，瀏覽器支援好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的**不會出現滾動條就使用吧。
評分：★★☆☆☆
left
right
div2
優點：沒有優點
缺點：會產生新的浮動問題。
建議：不推薦使用，只作瞭解。
評分：★☆☆☆☆
left
right
div2
left
right
div2
原文連線：幾種常用的清除浮動方法
css清除浮動的原理
最近學習css發現了高度塌陷時候要清除浮動 為了理解清楚浮動原理 網上找了不少資料 發現都寫的不是很清楚 而且都是一模一樣的內容 我在裡分享...
清除浮動的原理和方法
本文複製自 1 問題的由來 有這樣一種情形 在一個容器 container 中，有兩個浮動的子元素。 在瀏覽器中一執行，就會出現意想不到的結...
解釋下浮動和它的工作原理？清除浮動的技巧
浮動元素脫離文件流，不佔據空間。浮動元素碰到包含它的邊框或者浮動元素的邊框停留。 浮動元素引起的問題和解決辦法？ 浮動元素引起的問題 父元素...