CSS教程:div設(shè)置float后高度不自動(dòng)增加
互聯(lián)網(wǎng) 發(fā)布時(shí)間:2008-10-17 19:24:40 作者:佚名
我要評(píng)論
相關(guān)文章:http://www.webjx.com/css/divcss-4952.html
http://www.webjx.com/css/divcss-5991.html
本來(lái)想把這個(gè)題目修改為“閉合浮動(dòng)元素”或“清除浮動(dòng)元素”,但想了一下,還是不修改為好。因?yàn)閺倪@個(gè)題目我們可以更加容易的看出,如
相關(guān)文章:http://www.dhdzp.com/css/divcss-4952.html
http://www.dhdzp.com/css/divcss-5991.html
本來(lái)想把這個(gè)題目修改為“閉合浮動(dòng)元素”或“清除浮動(dòng)元素”,但想了一下,還是不修改為好。因?yàn)閺倪@個(gè)題目我們可以更加容易的看出,如果您沒(méi)有閉合(清除)浮動(dòng)元素,它將造成的后果是-----div的高度不能自動(dòng)增加。
言歸正傳
目前用來(lái)清除“閉合(清除)浮動(dòng)”的方法,主要是一下四種:
1.額外標(biāo)簽法
這種方法就是向父容器的末尾再插入一個(gè)額外的標(biāo)簽,并令其清除浮動(dòng)(clear)以撐大父容器。這種方法瀏覽器兼容性好,沒(méi)有什么問(wèn)題,缺點(diǎn)就是需要額外的(而且通常是無(wú)語(yǔ)義的)標(biāo)簽。
我個(gè)人不喜歡這種方法,但是它確實(shí)是W3C推薦的方法
<div style="clear:both;"></div>
或者使用 <br style="clear:both;" />
2.使用after偽類
這種方法就是對(duì)父容器使用after偽類和內(nèi)容聲明在指定的現(xiàn)在內(nèi)容末尾添加新的內(nèi)容。經(jīng)常的做法就是添加一個(gè)“點(diǎn)”,因?yàn)樗容^小不太引人注意。然后我們?cè)倮盟鼇?lái)清除浮動(dòng)(閉合浮動(dòng)元素),并隱藏這個(gè)內(nèi)容。
這種方法兼容性一般,但經(jīng)過(guò)各種 hack 也可以應(yīng)付不同瀏覽器了,同時(shí)又可以保證html 比較干凈,所以用得還是比較多的。
#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3.設(shè)置overflow為hidden或者auto
這種做法就是將父容器的overflow設(shè)為hidden或auot就可以在標(biāo)準(zhǔn)兼容瀏覽器中閉合浮動(dòng)元素.
不過(guò)使用overflow的時(shí)候,可能會(huì)對(duì)頁(yè)面表現(xiàn)帶來(lái)影響,而且這種影響是不確定的,你最好是能在多個(gè)瀏覽器上測(cè)試你的頁(yè)面
4.浮動(dòng)外部元素,float-in-float
這種做法就是讓父容器也浮動(dòng),這利用到了浮動(dòng)元素的一個(gè)特性——浮動(dòng)元素會(huì)閉合浮動(dòng)元素。這種方式在 IE/Win 和標(biāo)準(zhǔn)兼容瀏覽器中都有較好的效果,但缺點(diǎn)也很明顯——父容器未必想浮動(dòng)就浮動(dòng)的了,畢竟浮動(dòng)是一種比較特殊的行為,有時(shí)布局不允許其浮動(dòng)也很正常。
個(gè)人不是很贊成這種做法,但是從dudo最后的總結(jié)總可以看出,他好像很贊成這種做法
相關(guān)文章
- 當(dāng)一個(gè)元素只包含浮動(dòng)元素的時(shí)候,它會(huì)出現(xiàn)高度折疊,即元素的上下底邊重合,和高度為0效果一樣,針對(duì)這個(gè)問(wèn)題與大家分享四種解決方法,感興趣的你可以參考下本文或許對(duì)你2013-03-04
解決子容器全部浮動(dòng)時(shí)父容器高度不能自動(dòng)撐開(kāi)的方法
剛?cè)腴T網(wǎng)站設(shè)計(jì)布局的開(kāi)發(fā)者肯定會(huì)碰到這樣的問(wèn)題,那就是當(dāng)子容器全部浮動(dòng)的時(shí)候,父容器的高度不能自動(dòng)撐開(kāi),今天偶也遇此問(wèn)題,需要了解的朋友可以參考下2012-12-27純CSS無(wú)hacks的跨游覽器自適應(yīng)高度多列布局 推薦
翻譯自Matthew James Taylor的Equal Height Columns with Cross-Browser CSS and No Hacks,有些部分根據(jù)我的理解改了,讓一些初心者更好理解。2009-11-12- 由于浮動(dòng)的元素脫離了文檔流,所以它們不會(huì)在網(wǎng)頁(yè)文檔中占據(jù)空間。如果一個(gè)DIV容器中想要包含這些浮動(dòng)的元素的話,有兩種辦法。2011-08-02
- 在進(jìn)行浮動(dòng)布局時(shí),大多數(shù)人都深知,在必要的地方進(jìn)行浮動(dòng)清理:。2009-09-03
浮動(dòng)層自動(dòng)適應(yīng)高度的解決方法
在網(wǎng)頁(yè)制作中經(jīng)常會(huì)用到浮動(dòng)。用了浮動(dòng)就會(huì)涉及到一個(gè)清除浮動(dòng)的問(wèn)題,因?yàn)榘?dòng)的元素是不會(huì)自動(dòng)適應(yīng)高度的,也就是不會(huì)被浮動(dòng)元素?fù)伍_(kāi)。2010-07-23Css浮動(dòng)元素外層容器高度為0(無(wú)高度)的解決方法
在ie8、chrome瀏覽器中,包裹浮動(dòng)的li元素的外層ul高度為0,ie7瀏覽器和ie8兼容模式顯示正常,下面與大家分享下多種解決方法大家可以根據(jù)情況自由選擇,希望對(duì)大家有所幫助2013-07-31

