浮動的元素之間是互相貼靠的。但是在實際的工作中，我們是希望同組的元素互相貼靠的，但是不同組的元素之間是不互相貼靠的。第二組的元素不應該與第一組的元素有任何互相的影響。

?

比如，我們想要的效果是這樣的：

但是如果浮動沒有清除的話，就會變成這樣：

?

?

清除浮動有四種方式，一般常選用后兩種，根據不同的情況進行選擇。

1）加高法：

浮動的元素，只能被有高的盒子關住。但是，工作上絕不會給所有的盒子都加高度，因為這樣很麻煩，而且沒法適應頁面的快速變化。

2）clear：both

最簡單的清除浮動的方法，就是給盒子加clear：both，表示自己的內部元素，不受其他元素的影響。但是有個問題，就是margin失效了。

但是盒子中的浮動元素的margin屬性并沒有失效（個人嘗試）。

3）隔墻法：（新浪的前端大部分采用的是這種方式）

在兩部分浮動元素之間，建一個墻，隔開兩部分浮動（注意是在兩個包含浮動元素的盒子中間）。墻要加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標簽的樣式中，則還是會堆在一起。所以，找到用于劃分組的標簽很重要。

?

轉載于:https://www.cnblogs.com/cuishuyao/p/6525081.html

總結

以上是生活随笔為你收集整理的关于CSS样式清除浮动的总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。