整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
一開始css的浮動，其本質(zhì)是用來做一些文字混排效果的，但是后來被我們拿來做布局用，就出現(xiàn)了很多問題。
清除浮動的本質(zhì)： 為解決父級元素因為子級浮動引起高度為0的問題
我們很多時候不方便給父盒子的高度，因為我們不清除有多少子盒子，有多少內(nèi)容。經(jīng)常的做法會讓內(nèi)容撐開父盒子的高度。 但是如果父盒子中有子盒子浮動了之后，就會影響到后面的盒子，因為浮動元素脫離了標準流。會把后面還在標準流的盒子覆蓋，解決這個問題的方法就要清除浮動
原理圖
清除浮動其實叫做 閉合浮動 更合適，因為是把浮動的元素圈起來，讓父元素閉合出口和入口不讓他們出來影響其他的元素。 在CSS中，clear屬性用于清除浮動，其基本語法格式如下：
選擇器 { clear : 屬性值 ; }
/*屬性值為left,清除左側(cè)浮動的影響
屬性值為right,清除右側(cè)浮動的影響
屬性值為both,同時清除左右兩側(cè)浮動的影響*/
復(fù)制代碼通過在浮動元素的末尾添加一個空的標簽。這是W3C推薦的做法，雖然比較簡單，但是添加了無意義的標簽，結(jié)構(gòu)化比較差，所以不推薦使用。下面三種寫法都適用：
<!--寫法一：直接用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樣式方法。
這種方法代碼比較簡潔，可以通過觸發(fā)BFC方式，但是因為本身overflow的本質(zhì)是 溢出隱藏 的效果，所以有的時候也會有一些問題存在，比如內(nèi)容增多的時候不會自動換行導致內(nèi)容被隱藏掉，無法顯示出要溢出的元素。
.father {
overflow: auto;
/* 加上這句話，就可以清除浮動 overflow=hidden|auto|scroll 都可以實現(xiàn)*/
}
復(fù)制代碼after是在父元素中加一個盒子，這個元素是通過css添加上去的，符合閉合浮動思想，結(jié)構(gòu)語義化正確。 父元素中加一個類名為clearfix 。但是這個方法IE6-IE7不識別，要進行兼容，使用zoom:1觸發(fā)hasLayout來清除浮動
代表網(wǎng)站：百度、淘寶、網(wǎng)易等
.clearfix:after{
content:"."; /*盡量不要為空，一般寫一個點*/
height:0; /*盒子高度為0，看不見*/
display:block; /*插入偽元素是行內(nèi)元素，要轉(zhuǎn)化為塊級元素*/
visibility:hidden; /*content有內(nèi)容，將元素隱藏*/
clear:both;
}
.clearfix {
*zoom: 1; /* *只有IE6,7識別 */
}
復(fù)制代碼父元素中加一個類名為clearfix，也需要兼容IE6-IE7
在Unicode字符里有一個“零寬度空格”，即U+200B，代替“.”，可以減少代碼量，不再使用visibility:hidden
代表網(wǎng)站：阿里巴巴
.clearfix::after{
content:"\200B"; /* content:'\0200'; 也可以 */
display:block;
height:0;
clear:both;
}
.clearfix {
*zoom: 1;
}
復(fù)制代碼這種方法完全符合閉合浮動思想。給父元素加一個類名為clearfix,需要兼容IE6-IE7
代表網(wǎng)站：小米、騰訊
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
復(fù)制代碼?copyright burning.
最后在這里說一下，目前在職web前端開發(fā)，如果你現(xiàn)在在學習web前端，在整個前端入門的學習過程當中，有遇見任何關(guān)于學習方法，學習路線，學習效率等方面的問題，或者缺乏基礎(chǔ)入門的視頻教程，前端面試題，學習手冊，開發(fā)工具，PDF文檔書籍教程，都可以隨時關(guān)注并私信我：前端 ，系統(tǒng)自動堅持會發(fā)送交流圈子，可以來自行獲取下載。
作者：頑皮的雪狐七七
鏈接：https://juejin.cn/post/6901903789197197325
來源：掘金
動的目的：把多個盒子放在一行上
清除浮動的目的：解決父盒子高度為0的問題
清除浮動，也稱閉合浮動
注：本文不兼容IE6
未清除浮動實現(xiàn)情況：
圖1
清除后：
圖2
原代碼：
復(fù)制代碼
<!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>
復(fù)制代碼
具體方法：
1.額外標簽法
在含浮動標簽后加兄弟盒子清除浮動
例：
復(fù)制代碼
<!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>
復(fù)制代碼
缺點：添加了許多空div
2.給父盒子overflow:hidden
觸發(fā)bfc模式（該名詞不懂請谷歌/百度，初學者可暫時略過)，直接清除浮動
復(fù)制代碼
<!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>
復(fù)制代碼
缺點：不可與position屬性配合使用
3.偽元素法
給父元素定義偽類:after(此處使用的是公共類clearfix）
復(fù)制代碼
.clearfix:after{
content:"";/*內(nèi)容為空*/
visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁中該占的位置還是占著*/
display:block;/*變成塊級元素*/
height:0;
clear:both;/*清除浮動*/
}
復(fù)制代碼
具體代碼：
復(fù)制代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>清除浮動</title>
<style type="text/css">
.clearfix:after{
content:"";/*內(nèi)容為空*/
visibility:hidden;/*將元素隱藏，但是在網(wǎng)頁中該占的位置還是占著*/
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>
復(fù)制代碼
缺點：IE8以上和非IE瀏覽器才支持
4.雙偽元素法
給父類加上偽類:before和:after
復(fù)制代碼
.clearfix:before,.clearfix:after{
content:"";
display:table;
}
.clearfix:after{
clear:both;
}
復(fù)制代碼
具體代碼：
復(fù)制代碼
<!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>
復(fù)制代碼
附：
對于上述4種方法，優(yōu)先推薦方法3和4，當然1和2也可，可根據(jù)具體情況使用。
還有幾種亂七八糟的清除浮動方法，但是缺點多，故不提起.
最后你覺得我們的文章對你有幫助，歡迎關(guān)注我，可以私信我：久伴，領(lǐng)取學習資料，在評論下方可以關(guān)注我的學習群，你可以隨時在上面向我們提問，把你在學習前端過程中所遇到的問題發(fā)給我們。我們每天都會按時回復(fù)大家的每一個問題，希望久伴可以伴隨你從入門到專家。
首先我們通過一張圖來解釋下元素浮動是什么樣的狀態(tài)。
元素浮動情況
上圖的html部分代碼為：
html代碼
css部分代碼為：
css代碼
通過上面的圖片可以看出，當內(nèi)部的div設(shè)置float后，外部的元素的就會受到以下影響：
背景不能顯示
邊框不能被撐開
margin和padding設(shè)置的值不能正確顯示
如果不清除元素浮動的話，浮動層后面的非浮動層內(nèi)容就有可能被覆蓋，造成頁面的排版混亂。
例如在上面的例子中再加一個非浮動的div，就會發(fā)現(xiàn)該div被前面的三個浮動div覆蓋住。
因為浮動，后面的div被覆蓋
既然會出現(xiàn)這種情況，我們就應(yīng)該設(shè)法清除掉元素的浮動。
我們可以給父級元素.outer設(shè)置為定高，這樣就可以不影響后面的非浮動元素。.outer的樣式為：
設(shè)置定高
達到的效果為
清楚浮動之后
雖然這種方法可以清楚浮動，但是對父元素設(shè)置定高會有很多的限制，如果內(nèi)層div的高度變化，則需要手動修改外層div的高度，相對來說有點麻煩，因此這種方法并不推薦。
在父元素內(nèi)部的末尾處添加一個新的div，并設(shè)置其clear: both;屬性。
添加一個新的div
該新增div的css屬性為：
新增div的css屬性
利用該方法同樣可以達到清楚浮動的效果，但是由于會新增DOM元素，這種方法也不推薦。
在父級元素上使用overflow:hidden屬性，準確來說只要不給overflow屬性設(shè)置為visible都可以清除元素浮動。
設(shè)置overflow: hidden
使用這種方法可以少寫很多css樣式代碼，同時不會新增DOM元素，因此推薦使用這種方式。
通過對父元素使用:after偽元素，同樣可以達到清除浮動的效果。
偽元素清楚浮動
以上方法在偽元素中，通過設(shè)置clear與overflow屬性來實現(xiàn)。方法4在實際的項目中使用的頻率最高，因此極大的推薦使用方法4來清除元素浮動。
看到網(wǎng)上有的資料介紹，通過設(shè)置父元素為浮動，或者設(shè)置父元素為absolute定位，這兩種方法只是能顯示父元素而已，但父元素同樣會覆蓋到后面的非浮動元素，因此這兩種方法嚴格意義來說并不算清除浮動的方法。
今天這篇文章主要介紹了幾種通過CSS來清除元素浮動的方法，你掌握了嗎？
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
