|
徹底弄懂CSS盒子模式三(浮動(dòng)的表演和清除的自述)
1.徹底弄懂CSS盒子模式一(DIV布局快速入門(mén)) 【論壇討論】
2.徹底弄懂CSS盒子模式二(導(dǎo)航欄實(shí)例) 【論壇討論】
4.徹底弄懂CSS盒子模式四(絕對(duì)定位和相對(duì)定位) 【論壇討論】
5.徹底弄懂CSS盒子模式五(定位強(qiáng)化練習(xí)) 【論壇討論】
一、下面請(qǐng)看float的精彩表演，有請(qǐng)。
大家好,我是float,歡迎訪問(wèn)CSS家族,在CSS家族中,在當(dāng)今CSS排版流行的年代,我可扮演著重要的角色哦。因?yàn)槲业墓ぷ鲗?duì)網(wǎng)頁(yè)設(shè)計(jì)人員很有用，就像之前align幫助你們定位網(wǎng)頁(yè)元素一樣重要，但是我的功能似乎比align強(qiáng)多了。接下來(lái)我將現(xiàn)場(chǎng)給你演示我的絕活，看細(xì)心點(diǎn)哦。當(dāng)然也許我一下子不能把我所有的技巧給大家演示，因?yàn)橛行┘记杀救艘苍S一下子記不起來(lái)了，那就請(qǐng)那些對(duì)我比較了解的人來(lái)幫我補(bǔ)充補(bǔ)充啰，比如版主等等啊。
先講一下我主要的工作，我主要是幫助對(duì)像在網(wǎng)頁(yè)中對(duì)齊的，一旦我發(fā)出float:left或float:right命令，被我浮動(dòng)的對(duì)像就會(huì)向左或向右移動(dòng)直到遇到邊框( border) 、填充( padding） 、邊界( margin ）或者另一個(gè)塊對(duì)象的邊緣為止，當(dāng)然也有一些看起來(lái)較特殊的情況，比如被我浮動(dòng)的元素設(shè)置了一個(gè)負(fù)邊界（margin）的時(shí)候。我還可以讓文字流環(huán)繞在被我浮動(dòng)的對(duì)像周?chē)?這也是我的特色。另外要注意的一點(diǎn)是，最好給浮動(dòng)對(duì)象設(shè)置一下寬度，不然會(huì)出現(xiàn)一些意想不到的麻煩。我主要浮動(dòng)類(lèi)型有兩種,它們是float:left和float:right,當(dāng)然我還有一個(gè)功能是float:none,不過(guò)float:none比較少用，這也是我的默認(rèn)值，有時(shí)也是很有用的，我等一下會(huì)講的。下面我開(kāi)始表演了,我的舞臺(tái)可以是IE(Internet Explorer),或者FF(Firefox),但是有些技巧我一定要在標(biāo)準(zhǔn)的舞臺(tái)中,如FF中才能表出來(lái)做的,請(qǐng)注意看我的說(shuō)明,不然你用IE是看不到效果的。
1.我不動(dòng)聲色（我的屬性不設(shè)置的時(shí)候），即：float:none,或者樣式中不寫(xiě)這一項(xiàng)時(shí)，網(wǎng)頁(yè)中的元素將按照它們自身的出現(xiàn)方式排列，一般是靠邊對(duì)齊，先出現(xiàn)的排在前邊,下面運(yùn)行框是DIV先出現(xiàn)，P后出現(xiàn)，所以P排在DIV后面，注意看DIV的右邊還有很多空間，但是P的文字不會(huì)跟在它的右邊去。看：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
2.我向盒子發(fā)出float:left命令，此時(shí)盒子浮動(dòng)到左邊，雖然看起來(lái)我的位置與上面例子沒(méi)有什么變化，但此時(shí)跟在我后面的文本可以環(huán)繞到浮動(dòng)盒子的右邊了，看下面：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
3.我向盒子發(fā)出float:right命令，不難想象此時(shí)盒子浮動(dòng)到右邊，此時(shí)文本將會(huì)環(huán)繞到此盒子的左邊，看下面：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
哈哈，看我表演了幾項(xiàng)是不是開(kāi)始覺(jué)得有點(diǎn)煩了，那么簡(jiǎn)單無(wú)聊的，那下面就給你表演幾項(xiàng)特別的，但愿你不是IE的崇拜者，因?yàn)橄旅嫘Ч阌肐E是看不到效果的，請(qǐng)用像FF那樣的標(biāo)準(zhǔn)瀏覽器來(lái)運(yùn)行代碼框或測(cè)試吧。
4．浮動(dòng)對(duì)象有負(fù)邊界的情況，這時(shí)浮動(dòng)對(duì)象可能會(huì)漂浮到其所在父對(duì)象外邊去，這有點(diǎn)像絕對(duì)定位的效果，但又與絕對(duì)定位不同，它還能影響它所在地方的文本流，請(qǐng)用標(biāo)準(zhǔn)瀏覽器FF看下面代碼效果：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
5．如果一個(gè)較寬的子盒子在一個(gè)較窄的父盒子中擁有浮屬性，子盒子漂浮后不會(huì)影響到父盒子的寬度，子盒子超出父盒子的部分會(huì)越到父盒子外面，但越出父盒子外的部分不會(huì)引起外邊文本流的移動(dòng)，而會(huì)直接覆蓋在外邊文字上面的，請(qǐng)用標(biāo)準(zhǔn)瀏覽器FF看下面代碼效果：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
6．如果父盒子不設(shè)定高度或者高度為自動(dòng)，而其子盒子設(shè)定了浮動(dòng)，并且高度超過(guò)了父盒子，在標(biāo)準(zhǔn)瀏覽器中，父盒子高度是不能自適高度，但是這種高度自適應(yīng)常是我們需要的，如何做到讓高度自適應(yīng)呢，常見(jiàn)的辦法是在父級(jí)內(nèi)，浮動(dòng)子盒子后邊加入以下代碼：<div style="clear:both"></div>清除掉那個(gè)小盒子的浮動(dòng)。請(qǐng)自行把代碼中我注釋部分消除注釋再看效果，現(xiàn)在是沒(méi)有自適應(yīng)的情況，請(qǐng)用標(biāo)準(zhǔn)瀏覽器FF預(yù)覽和測(cè)試代碼效果：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運(yùn)行]
經(jīng)典論壇討論：
http://bbs.blueidea.com/thread-2732609-1-1.html
出處：藍(lán)色理想
責(zé)任編輯：elesa
上一頁(yè) 下一頁(yè) 浮動(dòng)的表演和清除的自述 [2]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁(yè) 浮動(dòng)的表演和清除的自述 [1]
第 2 頁(yè) 
