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