CSS清除浮動(dòng)方法總結(jié)
我要評(píng)論清除浮動(dòng)的原因
假設(shè)一個(gè) div 內(nèi)部有個(gè)浮動(dòng)的 div，當(dāng)內(nèi)部 div 的高度要比外層的父級(jí) div 高度大時(shí)，將會(huì)導(dǎo)致父級(jí) div 高度無(wú)法隨著內(nèi)部 div 的高度自適應(yīng)，這是由于浮動(dòng)元素已經(jīng)脫離了正常文檔流，因此無(wú)法對(duì)父級(jí)元素產(chǎn)生影響。舉例如下：
<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>
此時(shí)，我們就需要手動(dòng)來(lái)清除浮動(dòng)。
加入空 div
這是我之前的做法，即在結(jié)尾處添加一個(gè)空的 div，并設(shè)置 clear: both 屬性。
<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
#clear {
clear: both;
}
</style>
<div id="a">A
<div id="b">B</div>
<div id="clear"></div>
</div>
這個(gè)方法看似簡(jiǎn)單，但是如果清除浮動(dòng)的地方較多，會(huì)產(chǎn)生很多無(wú)意義的 div，對(duì)于整個(gè) HTML 結(jié)構(gòu)無(wú)疑是有弊端的。
設(shè)定父級(jí) div 高度
這個(gè)方法有點(diǎn) hard code，由于父級(jí) div 無(wú)法高度自適應(yīng)，因此我們可以直接給父級(jí) div 設(shè)置一個(gè)固定的高度值，如上例，考慮到 border 的值，設(shè)定父級(jí) div 高度為 52px。
<style>
#a {
width: 100px;
height: 52px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>
這個(gè)方法很快速但也脆弱，一旦內(nèi)部浮動(dòng)元素高度發(fā)生變化就無(wú)效了，所以只能應(yīng)用于高度固定的場(chǎng)景。
設(shè)定父級(jí) div 屬性 overflow
直接給父級(jí) div 添加 overflow: hidden 或 overflow: auto 屬性，這里以 overflow: hidden 為例。
<style>
#a {
width: 100px;
border: 1px solid #ccc;
overflow: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>
這個(gè)看上去又簡(jiǎn)單又實(shí)用，但是你不能對(duì)父級(jí) div 設(shè)置高度，一旦父級(jí) div 設(shè)置了固定高度，那么浮動(dòng)元素超出的部分也會(huì)被隱藏。
<style>
#a {
width: 100px;
height: 20px;
border: 1px solid #ccc;
overflow: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>
當(dāng)使用 overflow: auto 屬性同時(shí)設(shè)定固定高度時(shí)效果為：
設(shè)置父級(jí) div 偽類(lèi) before && after
這個(gè)方法即問(wèn)題中介紹的新方法，對(duì)父級(jí) div 設(shè)置偽類(lèi) before 和 after 的值。
<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#a:before, #a:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>
這個(gè)方法應(yīng)該是最佳方案，即不會(huì)產(chǎn)生無(wú)意義的空 div，同時(shí)當(dāng)父級(jí)元素高度固定時(shí)并不會(huì)影響內(nèi)部的浮動(dòng)元素高度。但是唯一一點(diǎn)就是偽類(lèi)的兼容性問(wèn)題。對(duì)于低版本的 IE 瀏覽器我們可以使用：
#a {
zoom:1
}
在閱讀了 @ShingChi 兄推薦的這篇博文 - http://nicolasgallagher.com/micro-clearfix-hack/ 后，我們還可以進(jìn)一步地簡(jiǎn)化代碼如下：
<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#a:before, #a:after {
content: "";
display: table;
clear: both;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>
相關(guān)文章
簡(jiǎn)要總結(jié)CSS編程中的響應(yīng)式設(shè)計(jì)
這篇文章主要介紹了CSS編程中的響應(yīng)式設(shè)計(jì),是CSS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-03- 這篇文章主要介紹了CSS的一些編程規(guī)范總結(jié),文中所列基本上得到多數(shù)開(kāi)發(fā)者的共識(shí),樹(shù)立統(tǒng)一規(guī)范有助于debug等工作的進(jìn)行,因而強(qiáng)烈推薦此文!需要的朋友可以參考下2015-07-09
- 這篇文章主要介紹了10個(gè)必備的CSS技巧總結(jié),隨看隨記,敬請(qǐng)收藏~需要的朋友可以參考下2015-06-29
css 調(diào)試方法與經(jīng)驗(yàn)總結(jié)
主要記錄本人調(diào)試過(guò)程中所終結(jié)的經(jīng)驗(yàn)與方法，css關(guān)系到界面的美觀，有時(shí)候功能實(shí)現(xiàn)了。界面確丑到?jīng)]人用，終歸還是一件失敗的產(chǎn)品2014-06-15CSS多瀏覽器兼容總結(jié)(個(gè)人經(jīng)驗(yàn))
多瀏覽器兼容一直都是前端開(kāi)發(fā)者需要考慮的重要問(wèn)題之一，由于一直困擾著大家，因此本文整理了一些個(gè)人的實(shí)戰(zhàn)經(jīng)驗(yàn)與大家分享下，看過(guò)之后感覺(jué)不錯(cuò)的可以收藏哦2013-10-30CSS樣式的基礎(chǔ)學(xué)習(xí)總結(jié)
進(jìn)行css布局的同時(shí)，沒(méi)有足夠的基礎(chǔ)知識(shí)是不可能的，本文為初學(xué)者整理了一些，經(jīng)常使用的css屬性，感興趣的朋友可以參考下，或許有所幫助2013-10-05深入CSS3 動(dòng)畫(huà)效果的總結(jié)詳解
本篇文章是對(duì),CSS3中的動(dòng)畫(huà)效果進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-09IE下css常見(jiàn)問(wèn)題總結(jié)及解決
本文整理了ie中div的垂直居中問(wèn)題、margin加倍的問(wèn)題、ie6下頁(yè)面min-width/height與max-width/height問(wèn)題、ie6 3px bug及ie6捉迷藏的問(wèn)題等等，感興趣的朋友可以參考下哈2013-04-01CSS(Cascading Style Sheet)級(jí)聯(lián)樣式表常用術(shù)語(yǔ)總結(jié)
CSS（Cascading Style Sheet ）級(jí)聯(lián)樣式表總結(jié),如果使用CSS不要忘記寫(xiě)DOCTYPE等文檔類(lèi)型定義,接下來(lái)詳細(xì)為您介紹，需要了解的朋友可以參考下2013-01-03- 本文是小編日常整理了關(guān)于css學(xué)習(xí)和總結(jié)相關(guān)知識(shí)，本文介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2022-09-29