整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
動的目的：把多個盒子放在一行上
清除浮動的目的：解決父盒子高度為0的問題
清除浮動，也稱閉合浮動
注：本文不兼容IE6
未清除浮動實現情況：
圖1
清除后：
圖2
原代碼：
復制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
復制代碼
具體方法：
1.額外標簽法
在含浮動標簽后加兄弟盒子清除浮動
例：
復制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
<div class="clearbox"></div>
</div>
</body>
</html>
復制代碼
缺點：添加了許多空div
2.給父盒子overflow:hidden
觸發bfc模式（該名詞不懂請谷歌/百度，初學者可暫時略過)，直接清除浮動
復制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動</title>
<style type="text/css">
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
overflow: hidden;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
復制代碼
缺點：不可與position屬性配合使用
3.偽元素法
給父元素定義偽類:after(此處使用的是公共類clearfix）
復制代碼
.clearfix:after{
content:"";/*內容為空*/
visibility:hidden;/*將元素隱藏，但是在網頁中該占的位置還是占著*/
display:block;/*變成塊級元素*/
height:0;
clear:both;/*清除浮動*/
}
復制代碼
具體代碼：
復制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動</title>
<style type="text/css">
.clearfix:after{
content:"";/*內容為空*/
visibility:hidden;/*將元素隱藏，但是在網頁中該占的位置還是占著*/
display:block;/*變成塊級元素*/
height:0;
clear:both;/*清除浮動*/
}
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
復制代碼
缺點：IE8以上和非IE瀏覽器才支持
4.雙偽元素法
給父類加上偽類:before和:after
復制代碼
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
復制代碼
具體代碼：
復制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動</title>
<style type="text/css">
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
.content{
width:960px;
margin:100px auto;
border: 1px solid #ccc;
}
.left{
width:400px;
height: 200px;
background-color: green;
float: left;
}
.right{
width: 400px;
height: 200px;
background-color: red;
float: right;
}
.clearbox{
clear:both;
}
</style>
</head>
<body>
<div class="content clearfix">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
復制代碼
附：
對于上述4種方法，優先推薦方法3和4，當然1和2也可，可根據具體情況使用。
還有幾種亂七八糟的清除浮動方法，但是缺點多，故不提起.
最后你覺得我們的文章對你有幫助，歡迎關注我，可以私信我：久伴，領取學習資料，在評論下方可以關注我的學習群，你可以隨時在上面向我們提問，把你在學習前端過程中所遇到的問題發給我們。我們每天都會按時回復大家的每一個問題，希望久伴可以伴隨你從入門到專家。
天這篇文章給大家介紹3種CSS清除浮動的方法。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。
首先，這里就不講為什么我們要清楚浮動，反正不清除浮動事多多。
下面我就講3種常用清除浮動的方法，夠用了。
1、在浮動元素后面加一個空的div，并為它清除浮動
html代碼：
<div class="wrap"> <div class="float">浮動</div> <div class="clear"></div> <div class="nofloat">不想被浮動影響</div></div>css代碼：
.wrap{ width:500px; height:400px; border:1px solid red; margin:0 auto;}.float{ width:200px; height:200px; background:#ccc; float:left;}.nofloat{ width:300px; height:150px; background:red;}現在雖然加了一個空的div，但是并沒有給它清除浮動，所以目前的效果就是第三個子元素.nofloat還是收到浮動的影響。
OK，現在給.clear加上清除浮動：
.clear{ clear:both;}刷新一下效果就出來了：
PS：這種情況比較適合元素之間是垂直排列布局的，為了不受彼此浮動的影響。
2、利用BFC特性清除浮動
html代碼：
<div class="wrap"> <div class="float">浮動</div> <div class="nofloat">不想被浮動影響</div></div>css代碼：
.wrap{ width:500px; border:1px solid red; margin:0 auto; overflow:hidden;}.float{ width:200px; height:200px; background:#ccc; float:left;}.nofloat{ width:300px; height:150px; background:red; overflow:hidden;}效果是這樣的：
這里父容器是沒有設置固定高度的，本來第一個子元素浮動之后，父元素的高度會塌陷到跟第二個子元素一樣高，但由于這里分別給第二個子元素和父元素都設置了overflow:hidden ，所以它們都生成了一個新的BFC區域，根據上文提供的BFC布局規則可以得知：BFC區域不會與float box 重疊；計算BFC高度時浮動元素的高度也參與計算。
所以就得到清除浮動的效果。說得比較繞，但其實清除浮動得根據自己開發中的實際情況合理使用。
3、使用：after偽元素，給浮動元素的父元素清除浮動
html代碼：
<div class="wrap"> <div class="float">浮動</div></div>css代碼：
.wrap{ width:500px; border:1px solid red; margin:0 auto;}.float{ width:200px; height:200px; background:#ccc; float:left;}此時子元素浮動了，脫離了文檔流，所以父元素高度酒塌陷了：
可以看到父元素的邊框擠在一起了。
OK，現在給父元素添加一個clearfix類：
<div class="wrap clearfix"> <div class="float">浮動</div></div>.clearfix{ *zoom:1;}.clearfix:after{ content:'clear'; display:block; height:0; clear:both; overflow:hidden; visibility:hidden;}現在刷新后的效果就是：
這種方法和BFC清除浮動個人用的比較多，實際開發中，其實這兩種就夠用了。
好的，清除浮動我也就簡單地提到這里！
以上就是CSS清除浮動的幾種方法的詳細內容。如果有什么錯誤的話，歡迎留言指正。
楚浮動對于前端學習者是比較了解的，剛開始接觸前端就需要了解，那你知道HTML/css清除浮動的方法都有哪些？小猿圈web前端講師總結了幾個方法，希望可以幫助你學習前端。
清除浮動
當父容器沒有設置高度，里面的盒子沒有設置浮動的情況下會將父容器的高度撐開。一旦父容器中的盒子設置浮動，脫離標準文檔流，父容器立馬沒有高度，下面的盒子會跑到浮動的盒子下面。出現這種情況，我們需要清除浮動
清除浮動不是不浮動，是清除浮動產生的不利影響
清除浮動的方法
* 給浮動元素的父元素設置高度
* 額外標簽法
>給最后一個浮動元素后邊添加額外標簽，使用clear:both; 不推薦使用，會產生冗余代碼。
* 給浮動元素的父元素使用overflow:hidden; 觸發bfc,
>如果有子元素，出了父元素的范圍，多出的部分會隱藏掉。
* 后偽元素清除浮動
給浮動元素的父元素使用clearfix
.clearfix:after {
content:”.”;
display:block;
height: 0;
line-height: 0;
visibility:hidden;
clear:both;
}
.clearfix {
*Zoom: 1;
}
* 雙偽元素清除浮動
給浮動元素的父元素使用雙偽元素清除浮動
.clearfix:before,.clearfix:after {
content:'''';
display: table;
}
.clearfix:after {
clear: both;
}
以上就是小猿圈web前端講師對于HTML/css清除浮動的方法的介紹，既然學到了那就去快去試驗一下吧，記住學習上或者工作上遇到什么問題可以到小猿圈網站上尋找答案的，里面有最新最全的視頻還有助教老師指導你學習。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
