我們在頁面布局時，基本上都避免不了使用float，但由此也會引發一些問題，尤其是在容器高度不固定時，此時它的高度完全是由內部的元素撐開的。如果內部元素還是浮動的，那麼由於內部的元素脫離了文件流，父容器就不能被撐開了。如果父容器設定的有背景或者邊框的話，此時就不能正常顯示了，另外，父容器下邊的其他容器或內容也會跟著向上「浮」， 佔據上面的子容器應該佔據的位置。那麼，這時就需要清除浮動了。
這裡總結的幾種的方法主要就是針對類似於上面的問題的，但也不僅限於以上問題。主要有以下幾種方法：
1、設定空標籤
2、父容器設定display: inline-block
3、父容器設定overflow值auto或hidden
4、clearfix方法
下面就根據乙個例子分別看一下吧。
例子：html結構是這樣的：
1
2
3
4
5
6
<divclass="cont1">
<divclass="cols1">cols1
<divclass="cols2">cols2
cont1
<divclass="cont2">cont2
cont1高度不固定，cols1和cols2浮動，cont2高度固定在cont1下面。
不清除浮動時的效果：
理想效果：
下面就分別用幾種方法實現一下：
方法一：設定空標籤
我們在容器cont1的最後面新增空標籤clear:
1
2
3
4
5
6
7
<divclass="cont1">
<divclass="cols1">cols1
<divclass="cols2">cols2
cont1
<divclass="clear">
<divclass="cont2">cont2
然後對clear新增css:
1
2
3
.clear
ok，這樣就行了。
方法二：父容器設定display: inline-block
只需對父容器新增css屬性display: inline-block; 就行了
1
2
3
4
5
.cont1
方法三：父容器設定overflow值auto或hidden
只需對父容器新增屬性overflow: auto; 或者 overflow: hidden;
1
2
3
4
5
.cont1
方法四：clearfix方法
此時需要寫乙個clearfix的類：
1
2
3
4
5
6
7
8
9
.clearfix:before,
.clearfix:after
.clearfix:after
然後在cont1裡面掛載上clearfix類就可以了。
**（web前端開發）
浮動的清除 四種方法
原文 前言 乙個父親不能被自己浮動的兒子，撐出高度。我們本以為這些li，會分為兩排，但是，第二組中的第1個li，去貼靠第一組中的最後乙個li了。第二個div中的li，去貼第乙個div中最後乙個li的邊了。原因就是因為div沒有高度，不能給自己浮動的孩子們，乙個容器。只要浮動在乙個有高度的盒子中,那麼...
清除浮動的四種方法
今天面試 被問了乙個常考的問題 如何清除浮動，本身這個技術沒總結過，加上嘴笨 回答的不怎麼樣，於是簡單的整理一下 1.為什麼清除浮動 總是要清除浮動，為什麼呢，使用浮動之後出現什麼預期之外的顯示效果要清除浮動，總結一下，我認為是為了解決浮動帶來的高度塌陷 2.高度塌陷 先給乙個父元素 只設定寬度，不...
清除浮動的四種方法
清除浮動主要是為了解決父元素因為子元素的浮動引起的內部高度為0的問題。清除浮動主要是將要清除浮動的元素轉化成乙個bfc塊級格式化上下文，相當於乙個盒子，以此來隔絕外部的影響。即bfc元素特性表現原則就是 內部子元素再怎麼翻江倒海，翻雲覆雨，都不會影響外部元素。因此避免了margin的穿透，清除浮動。...