動的目的:把多個盒子放在一行上
清除浮動的目的:解決父盒子高度為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也可,可根據具體情況使用。
還有幾種亂七八糟的清除浮動方法,但是缺點多,故不提起.
最后你覺得我們的文章對你有幫助,歡迎關注我,可以私信我:久伴,領取學習資料,在評論下方可以關注我的學習群,你可以隨時在上面向我們提問,把你在學習前端過程中所遇到的問題發給我們。我們每天都會按時回復大家的每一個問題,希望久伴可以伴隨你從入門到專家。
一開始css的浮動,其本質是用來做一些文字混排效果的,但是后來被我們拿來做布局用,就出現了很多問題。
清除浮動的本質: 為解決父級元素因為子級浮動引起高度為0的問題
我們很多時候不方便給父盒子的高度,因為我們不清除有多少子盒子,有多少內容。經常的做法會讓內容撐開父盒子的高度。 但是如果父盒子中有子盒子浮動了之后,就會影響到后面的盒子,因為浮動元素脫離了標準流。會把后面還在標準流的盒子覆蓋,解決這個問題的方法就要清除浮動
原理圖
清除浮動其實叫做 閉合浮動 更合適,因為是把浮動的元素圈起來,讓父元素閉合出口和入口不讓他們出來影響其他的元素。 在CSS中,clear屬性用于清除浮動,其基本語法格式如下:
選擇器 { clear : 屬性值 ; }
/*屬性值為left,清除左側浮動的影響
屬性值為right,清除右側浮動的影響
屬性值為both,同時清除左右兩側浮動的影響*/
復制代碼
通過在浮動元素的末尾添加一個空的標簽。這是W3C推薦的做法,雖然比較簡單,但是添加了無意義的標簽,結構化比較差,所以不推薦使用。下面三種寫法都適用:
<!--寫法一:直接用style-->
<div style="clear:both"></div>
<!--寫法二:使用clear類-->
<style>
.clear { clear:both }
</style>
<div class="clear"></div>
<!--寫法三:可以使用br等別的塊級元素來清除浮動-->
<style>
.clear { clear:both }
</style>
<br class="clear" />
把div放進父盒子里,這樣盒子會撐開,一般也不會用。
給父級元素添加overflow樣式方法。
這種方法代碼比較簡潔,可以通過觸發BFC方式,但是因為本身overflow的本質是 溢出隱藏 的效果,所以有的時候也會有一些問題存在,比如內容增多的時候不會自動換行導致內容被隱藏掉,無法顯示出要溢出的元素。
.father {
overflow: auto;
/* 加上這句話,就可以清除浮動 overflow = hidden|auto|scroll 都可以實現*/
}
復制代碼
after是在父元素中加一個盒子,這個元素是通過css添加上去的,符合閉合浮動思想,結構語義化正確。 父元素中加一個類名為clearfix 。但是這個方法IE6-IE7不識別,要進行兼容,使用zoom:1觸發hasLayout來清除浮動
代表網站:百度、淘寶、網易等
.clearfix:after{
content:"."; /*盡量不要為空,一般寫一個點*/
height:0; /*盒子高度為0,看不見*/
display:block; /*插入偽元素是行內元素,要轉化為塊級元素*/
visibility:hidden; /*content有內容,將元素隱藏*/
clear:both;
}
.clearfix {
*zoom: 1; /* *只有IE6,7識別 */
}
復制代碼
父元素中加一個類名為clearfix,也需要兼容IE6-IE7
在Unicode字符里有一個“零寬度空格”,即U+200B,代替“.”,可以減少代碼量,不再使用visibility:hidden
代表網站:阿里巴巴
.clearfix::after{
content:"\200B"; /* content:'\0200'; 也可以 */
display:block;
height:0;
clear:both;
}
.clearfix {
*zoom: 1;
}
復制代碼
這種方法完全符合閉合浮動思想。給父元素加一個類名為clearfix,需要兼容IE6-IE7
代表網站:小米、騰訊
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
復制代碼
?copyright burning.
最后在這里說一下,目前在職web前端開發,如果你現在在學習web前端,在整個前端入門的學習過程當中,有遇見任何關于學習方法,學習路線,學習效率等方面的問題,或者缺乏基礎入門的視頻教程,前端面試題,學習手冊,開發工具,PDF文檔書籍教程,都可以隨時關注并私信我:前端 ,系統自動堅持會發送交流圈子,可以來自行獲取下載。
作者:頑皮的雪狐七七
鏈接:https://juejin.cn/post/6901903789197197325
來源:掘金
天這篇文章給大家介紹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清除浮動的幾種方法的詳細內容。如果有什么錯誤的話,歡迎留言指正。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。