篇文章我們說了元素的浮動,本篇文章主要介紹下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小時內與您取得聯系。