整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章我們說了元素的浮動，本篇文章主要介紹下css浮動帶來的影響，以及如何清除浮動。
細心的人可能發現了，在我們上篇文章寫的導航條中存在一個問題，那就是使用了float之后，父級盒子的高度變為0了。我們來寫一個例子來看一下，創建一個父級div，并設置border屬性，然后下邊創建兩個子元素span，并設置浮動。具體代碼如下所示：
由上圖可以看出，在給span添加了float之后，父級元素div的高度就變成了0。我們有以下幾種方式來解決這個問題
原理：如果父級元素沒有定義高度，父元素的高度完全由子元素撐開時，父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握。
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題。對于響應式布局會有很大影響。
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度。
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，不利于頁面的優化。
原理：元素生成偽類的作用和效果相當于方法2中的原理，但是IE8以上和非IE瀏覽器才支持:after，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好、不容易出現怪問題，寫法是固定的，不理解也可以直接復制使用；（小編大力推薦使用此種方法，簡單便捷，只需添加一個class即可解決問題）
缺點：css代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。
優點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。（不建議使用此種方式，可能會影響頁面元素布局）
好了，本篇文章就給大家說到這里，大家自己下來可以這幾種方式都試一試，自己感覺下哪種更適合自己，小編一直使用的是第3種方式。
每日金句：這次本來可以咸魚翻身的，沒想到粘鍋了。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。
動的目的：把多個盒子放在一行上
清除浮動的目的：解決父盒子高度為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也可，可根據具體情況使用。
還有幾種亂七八糟的清除浮動方法，但是缺點多，故不提起.
最后你覺得我們的文章對你有幫助，歡迎關注我，可以私信我：久伴，領取學習資料，在評論下方可以關注我的學習群，你可以隨時在上面向我們提問，把你在學習前端過程中所遇到的問題發給我們。我們每天都會按時回復大家的每一個問題，希望久伴可以伴隨你從入門到專家。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
