浮動的元素之間是互相貼靠的。但是在實際的工作中，我們是希望同組的元素互相貼靠的，但是不同組的元素之間是不互相貼靠的。第二組的元素不應該與第一組的元素有任何互相的影響。
比如，我們想要的效果是這樣的：
但是如果浮動沒有清除的話，就會變成這樣：
清除浮動有四種方式，一般常選用後兩種，根據不同的情況進行選擇。
1）加高法：
浮動的元素，只能被有高的盒子關住。但是，工作上絕不會給所有的盒子都加高度，因為這樣很麻煩，而且沒法適應頁面的快速變化。
2）clear：both
最簡單的清除浮動的方法，就是給盒子加clear：both，表示自己的內部元素，不受其他元素的影響。但是有個問題，就是margin失效了。
但是盒子中的浮動元素的margin屬性並沒有失效（個人嘗試）。
在兩部分浮動元素之間，建乙個牆，隔開兩部分浮動（注意是在兩個包含浮動元素的盒子中間）。牆要加clear：both屬性。用牆自己本身的高度作為兩個盒子之間的間隙。
內牆法：將牆放在浮動元素所在的盒子裡。與外牆法不同的是，內牆法使得盒子被撐起了高度。第乙個圖是用外牆法，div盒子的高度。第二張圖是用內牆法，div盒子的高度（這個高度是div裡所有元素的高度之和，比如裡面有兩個li標籤，每乙個li的高度是30px，內牆的高度是10px，那麼div盒子的高度就是30+10=40px，因為li元素是浮動的，兩個li元素是併排的，所以幾個li元素的高都是30px）。
**部分：（style中的css樣式部分是一樣的，就是牆的位置是不同的）
效果圖也是一樣的：
4）overflow:hidden
這個屬性的本意是將所有溢位盒子的內容隱藏掉。但是，這個屬性可以用於清除浮動。
乙個父元素，是不能被自己浮動的子元素撐出高度的。但是，如果給這個父元素加上了overflow：hidden；那麼這個父元素就能夠被浮動的兒子撐出高度了。
總結：在不同的情景下，應該要選擇不同的方式。比較大的結構可以用隔牆法，比較小的結構部分可以用第四種。
例子：要做如下結構的介面。
公告的內容是左浮動的，日期是右浮動的。
對於這種情況，應該用第四種方式去實現。用隔牆法的話不適用。因為在ul標籤中只能有li標籤，不能在兩個li標籤之間加入div標籤作為牆。而如果在兩個li標籤之間加li標籤作為牆的話，就浪費了語義。如果採用內牆法的話，在li標籤內加div標籤作為牆的話，就有點興師動眾。所以這個例子採用第四種方式最好，既簡單，又使結構很清晰。實現效果圖：
下圖1是body部分，圖2是css樣式部分
在li標籤中新增了overflow：hidden後，就不會出現堆在一起的情況了。注意，overflow:hidden在這個例子中要新增在li標籤中。因為在這個例子中，是以li標籤作為組的劃分的，而不是div標籤。如果將overflow:hidden新增在div標籤的樣式中，則還是會堆在一起。所以，找到用於劃分組的標籤很重要。
CSS樣式 清除浮動
一 為什麼要清除浮動？在某些情況下，我們不能設定父元素的高度，但是所有的子元素都是浮動的 脫標 父元素的高度為0，父元素後面的元素會上提。二 清除浮動的四種方法 1.額外標籤法 a.在最後增加乙個額外的div，用clear both去掉浮動屬性 b.w3c推薦的一種方法 c.增加了乙個莫名其妙的標籤...
css樣式的清除浮動
css樣式清除浮動 1.css樣式中的float浮動 css樣式的float浮動屬性，用於設定標籤物件 如 標籤盒子 標籤 標籤 標籤 html標籤 的浮動布局，浮動也就是我們所說標籤物件浮動居右靠右 float right 和浮動居左靠左 float left 文字靠左 text align le...
CSS清除浮動總結
一 拋一塊問題磚 display block 先看現象 分析html 結構 divclass outer divclass div1 1div divclass div2 2div divclass div3 3div div 分析css 樣式 outer div1 div2 div3 這裡我沒有給...