頁面佈局中經常使用的清除浮動的方法

咱們在頁面佈局時，基本上都避免不了使用float，但由此也會引起一些問題，尤爲是在容器高度不固定時，此時它的高度徹底是由內部的元素撐開的。若是內部元素仍是浮動的，那麼因爲內部的元素脫離了文檔流，父容器就不能被撐開了。若是父容器設置的有背景或者邊框的話，此時就不能正常顯示了，另外，父容器下邊的其餘容器或內容也會跟着向上「浮」， 佔據上面的子容器應該佔據的位置。那麼，這時就須要清除浮動了。

這裏總結的幾種的方法主要就是針對相似於上面的問題的，但也不只限於以上問題。主要有如下幾種方法：

一、設置空標籤

二、父容器設置display: inline-block

三、父容器設置overflow值auto或hidden

四、clearfix方法

下面就根據一個例子分別看一下吧。

例子：

Html結構是這樣的：

1 2 3 4 5 6

< div class = "cont1" >      < div class = "cols1" >cols1</ div >      < div class = "cols2" >cols2</ div >      cont1 </ div > < div class = "cont2" >cont2</ div >

cont1高度不固定，cols1和cols2浮動，cont2高度固定在cont1下面。

不清除浮動時的效果：

理想效果：

下面就分別用幾種方法實現一下：

方法一：設置空標籤

咱們在容器cont1的最後面添加空標籤clear:

1 2 3 4 5 6 7

< div class = "cont1" >      < div class = "cols1" >cols1</ div >      < div class = "cols2" >cols2</ div >      cont1      < div class = "clear" ></ div >      </ div > < div class = "cont2" >cont2</ div >

而後對clear添加css:

1 2 3

.clear {      clear : both ; }

Ok，這樣就好了。

方法二：父容器設置display: inline-block

只需對父容器添加css屬性display: inline-block; 就好了

1 2 3 4 5

.cont 1 { 　　... 　  display : inline- block ; 　　... }

方法三：父容器設置overflow值auto或hidden

只需對父容器添加屬性overflow: auto; 或者 overflow: hidden;

1 2 3 4 5

.cont 1 { 　　... 　　 overflow : auto ; /*hidden也能夠*/ 　　... }

方法四：clearfix方法

此時須要寫一個clearfix的類：

1 2 3 4 5 6 7 8 9

.clearfix:before, .clearfix:after {      display : table;      content :  " " ; }      .clearfix:after {      clear : both ; }

而後在cont1裏面掛載上clearfix類就能夠了。

以上就是總結的幾種清除浮動的方法，歡迎你們提出更好的解決方法。