清除css浮動(dòng)的三種方法小結(jié)
我要評(píng)論一，我們?yōu)槭裁匆?dòng)
為什么浮動(dòng)，為什么要清除浮動(dòng)，以及清除浮動(dòng)的方法。在網(wǎng)頁布局的時(shí)候有時(shí)需要元素并排顯示，如果不選擇浮動(dòng)，那么那些塊狀元素就會(huì)一行一行顯示，占用空間不說，用戶體驗(yàn)也是極為不好的。
以下是沒有浮動(dòng)的元素代碼
<div class=“box”>
<div class=“box01”></div>
<div class=“box02”></div>
</div>
.box{
background: #000;
}
.box01{
width: 100px;
height: 100px;
background: red;
}
.box02{
width: 100px;
height: 100px;
background: yellow;
}
1-1圖是沒有浮動(dòng)的元素，1-2圖是外層容器的寬高，下文會(huì)說到此次用意
在我們給元素加上浮動(dòng)之后，布局就變了，兩個(gè)div并排顯示了，如圖1-3，是不是很神奇，哈哈
但是大家有沒有發(fā)現(xiàn)最外一層的div背景色沒了，高度也變成了0，因?yàn)樵孛撾x的文檔流，在最外層的div中不占空間，這時(shí)我們就需要清除浮動(dòng)，清除由子元素浮動(dòng)給父元素帶來坍塌的影響。（注意這里清除浮動(dòng)不是指之前給子元素設(shè)置的浮動(dòng)，二是清除浮動(dòng)給父元素帶來的影響，希望大家能明白）。
二清除浮動(dòng)有三種方法：
第一種：clear:both;
在父元素的里面添加一個(gè)類clear的div（跟box01,box02同級(jí)），然后再為這個(gè)類添加屬性值clear:both;便可以清除浮動(dòng)，以下是代碼以及清除浮動(dòng)之后的效果如圖1-3
<div class=“box”>
<div class=“box01”></div>
<div class=“box02”></div>
<div class=“clear”></div>
</div>
.box{
background: #000;
}
.clear{
clear: both;
}
.box01{
width: 100px;
height: 100px;
background: red;
float: left;
}
.box02{
width: 100px;
height: 100px;
background: yellow;
float: left;
}
可以看到背景色出來了，而父元素的高正是100px，這是子元素?fù)伍_的。
第二種：overflow：hidden；
在父元素添加overflow: hidden;也可以清除浮動(dòng)，如下css代碼，但不提倡使用這個(gè)方法，overflow: hidden;還有一個(gè)意思就是隱藏超出的部分，處理不好還是會(huì)給頁面帶來麻煩。
.box{
background: #000;
overflow: hidden;
}
第三種：clearfix；
如果你的頁面使用bootstrap框架，引入css文件，給父元素添加clearfix便可以清除浮動(dòng)，這也是平時(shí)工作中最常用也是最受程序員喜歡的一種方法，只需添加一個(gè)類便可，而clear:both則是向頁面多加了一個(gè)div。所以小編向大家推薦第三種方法。
如果你的頁面使用的不是bootstrap框架，那么也有源碼供初學(xué)者參考，向clearfix添加偽類實(shí)現(xiàn)清除浮動(dòng)。
<div class=“box clearfix”>
<div class=“box01”></div>
<div class=“box02”></div>
<div class=“clear”></div>
</div>
.box{
background: #000;
}
.clearfix:before,.clearfix:after{
content: ”;
display: table;//可以很好的解決瀏覽器兼容問題
}
.clearfix:after{
clear: both;
}
.box01{
width: 100px;
height: 100px;
background: red;
float: left;
}
.box02{
width: 100px;
height: 100px;
background: yellow;
float: left;
}
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解css清除浮動(dòng)float的七種常用方法總結(jié)和兼容性處理
這篇文章主要介紹了詳解css清除浮動(dòng)float的七種常用方法總結(jié)和兼容性處理,非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-09-11
淺談css中浮動(dòng)和清除浮動(dòng)帶來的影響
這篇文章主要介紹了淺談css中浮動(dòng)和清除浮動(dòng)帶來的影響，通過代碼示例和圖片展示詳細(xì)介紹講解了浮動(dòng)的應(yīng)用和實(shí)現(xiàn)效果,需要的朋友可以參考下2017-08-14- 本文主要介紹了CSS解決浮動(dòng)，清除浮動(dòng)的幾種方法：1、設(shè)置父元素高度；2、overflow；3、增加子元素（塊級(jí)），并且設(shè)置其clear屬性值為both來解決（隔墻法、內(nèi)墻法）；4、使2017-03-22
詳解CSS中zoom屬性或overflow:auto屬性清除浮動(dòng)的作用
這篇文章主要為大家介紹了CSS中zoom屬性或overflow:auto屬性清除浮動(dòng)的作用,文中通過實(shí)例代碼介紹的很詳細(xì)，相信會(huì)對(duì)大家的理解和學(xué)習(xí)具有一定的參考借鑒價(jià)值，有需要的朋2016-11-26關(guān)于清除浮動(dòng)塌陷的幾種方法總結(jié)
在大家在使用css的過程中，多多少少會(huì)遇到清除浮動(dòng)這個(gè)問題。所以這篇文章給大家總結(jié)了div+css中關(guān)于清除浮動(dòng)塌陷的4種方法，相信會(huì)對(duì)大家學(xué)習(xí)或者使用div+css能有所幫助，2016-10-17- 下面小編就為大家?guī)硪黄獪\談CSS中的clear清除浮動(dòng)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-06
- 這篇文章主要介紹了CSS清除浮動(dòng)的方法詳解,值得注意的是并不是每次單純把浮動(dòng)清除掉就可以解決相關(guān)問題,文中最后談到的閉合浮動(dòng)的方案也非常值得一試,需要的朋友可以參考下2016-05-30
CSS浮動(dòng)所產(chǎn)生的內(nèi)容溢出問題及清除浮動(dòng)的方法小結(jié)
CSS的float浮動(dòng)效果在一些情況下非常不穩(wěn)定,控制不好的時(shí)候一般還是清除浮動(dòng)為妙,這里我們就來看一下CSS浮動(dòng)所差生的內(nèi)容溢出問題及清除浮動(dòng)的方法小結(jié)2016-05-30- 下面小編就為大家?guī)硪黄狣IV+CSS 清除浮動(dòng)常用方法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-06
Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總
這篇文章主要介紹了Css實(shí)現(xiàn)清除浮動(dòng)的方法匯總,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-11
