前端布局用的最多的是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中，我們有時會用到浮動屬性。簡單來說，標準流文件中，塊元素會佔據整行來顯示，比如div，h標籤等。後面的標籤會依次往後。但是用了浮動之後，就會脫離文件流，意味著後面的標籤可能會被擋住，引起布局混亂。因為浮動元素無法撐起父元素的高度 高度塌陷 那麼又想使用浮動屬性，又想讓後面元素按標準文件流布...
清除浮動詳解
我們看到下面這個例子 這裡我們給定了兩個盒子，這兩個盒子分別在box1，box2中 p1 p2同時給他們浮動 這裡都是向左浮 動 給定寬高，和 背景。p1 p2的父親分別是box1 box2。此時我們想象的執行結果應該是這個 樣子 但是我們可以把box1和box2想象成兩個國家box1國家和box2...
after before清除浮動原理
先來看一段 doctype html html lang en head meta charset utf 8 title document title style h1span pstyle head body div h1 我是h1 h1 span span div p 我是p p body h...