我們在頁面布局時，基本上都避免不了使用float，但由此也會引發一些問題，尤其是在容器高度不固定時，此時它的高度完全是由內部的元素撐開的。如果內部元素還是浮動的，那麼由於內部的元素脫離了文件流，父容器就不能被撐開了。如果父容器設定的有背景或者邊框的話，此時就不能正常顯示了，另外，父容器下邊的其他容器或內容也會跟著向上「浮」， 佔據上面的子容器應該佔據的位置。那麼，這時就需要清除浮動了。
這裡總結的幾種的方法主要就是針對類似於上面的問題的，但也不僅限於以上問題。主要有以下幾種方法：
1、設定空標籤
2、父容器設定display: inline-block
3、父容器設定overflow值auto或hidden
4、clearfix方法
下面就根據乙個例子分別看一下吧。
例子：html結構是這樣的：12
3456
<divclass="cont1">
<divclass="cols1">cols1
<divclass="cols2">cols2
cont1
<divclass="cont2">cont2
cont1高度不固定，cols1和cols2浮動，cont2高度固定在cont1下面。
不清除浮動時的效果：
理想效果：
下面就分別用幾種方法實現一下：
方法一：設定空標籤
我們在容器cont1的最後面新增空標籤clear:12
3456
7<divclass="cont1">
<divclass="cols1">cols1
<divclass="cols2">cols2
cont1
<divclass="clear">
<divclass="cont2">cont2
然後對clear新增css:12
3.clear
ok，這樣就行了。
方法二：父容器設定display: inline-block
只需對父容器新增css屬性display: inline-block; 就行了12
345.cont1
方法三：父容器設定overflow值auto或hidden
只需對父容器新增屬性overflow: auto; 或者 overflow: hidden;12
345.cont1
方法四：clearfix方法
此時需要寫乙個clearfix的類：12
3456
789.clearfix:before,
.clearfix:after
.clearfix:after
然後在cont1裡面掛載上clearfix類就可以了。
CSS中常用的清除浮動（閉合浮動）的方法
1.使用空標籤清除浮動。即 這種方法在大部分環境下可以使用，但是在有些情況下會出現相容問題 ie6瀏覽器當中，div即使是空的，也會存在預設行高。解決辦法 設定其高度為0，並設定overflow hidden。它的主要弊端在於在頁面中增加了乙個無意義的元素 2.使用overflow hidden 此...
css布局 清除浮動的常用方法
1 div class container 2 div class block1 子元素1 div 3 div class block2 子元素2 div 4div block1.block2 如上圖，在使用div css寫頁面的時候，經常要使用float樣式進行左右分欄布局。但是在子元素應用flo...
浮動布局及清除浮動的方法
浮動元素的特點 1.脫離標準流的控制，浮動的盒子不再保留原先的位置 2.行內元素具有浮動，可直接設定寬高屬性 3.塊級元素沒設定寬度，預設寬度和父級一樣寬，但是新增浮動後，大小由內容決定 4.浮動的盒子中間沒有空隙為什麼清除浮動 很多情況下，父元素不方便設定高度，高度由子元素撐起，但子元素浮動，就會...