CCS中Float的實(shí)質(zhì)_Div+CSS教程
當(dāng)一個(gè)元素被設(shè)定為float后,那么它似乎不再屬于這一行,也就是說,下一個(gè)元素可以跳到這一行來顯示,但第一個(gè)元素?zé)o論如何總要占據(jù)一定的空間(當(dāng)然還是在這一行),如果float:left,那么就意味著它將漂浮在這一行的最左邊,如此,第二個(gè)元素便緊貼其后(本來要沖到最左邊的,但第一個(gè)元素把最左邊的位子占了,先來后到,沒有辦法,只好坐在人家的右邊);如果float:right,那么第一個(gè)元素將漂浮到最右邊,同理,第二個(gè)元素跑到這行來顯示,由于第一個(gè)元素不再在最左邊,所以第二個(gè)元素可以名正言順地坐上頭把交椅(這一行的最左邊)。同理,有三個(gè)或多個(gè)元素時(shí),也一樣遵循這條法則。
Float是有很大用途的,但也不是想很多人說的可以替代一切。
Float通常是用來將默認(rèn) Display屬性為非inline值 的標(biāo)簽以left或right的方式在一行中篇列,也可以理解為并排排列。
好像玩撲克牌,如果你想把撲克牌從左到右的排列而又不想考慮撲克牌的寬度和后續(xù)撲克牌的X軸坐標(biāo)位置。那你就可以用
.撲克牌{ float:left; }
還有用什么方法并沒有錯(cuò),不要迷信別人說的用“position:absolute定位”就是錯(cuò)的。position:absolute在解決很多問題中都很有用。
不要把問題單一化,規(guī)則化,才是好的做法。
我在做的東西也很多都用“position:absolute定位”但只要你自己覺得這樣用最簡化的最有效的解決了你的問題就是好的。
在多瀏覽器兼容問題上我覺得“position:absolute定位”很有優(yōu)勢。但一定要考慮“position:absolute定位”的環(huán)境適應(yīng)度問題。
- DIV+CSS設(shè)計(jì)的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對(duì)聯(lián)廣告不隨屏幕滾動(dòng)的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級(jí)元素和內(nèi)聯(lián)元素
- 5個(gè)你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個(gè)優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計(jì)教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
- 如何處理圖標(biāo)文字的混排?
- CSS左列固定,右列寬度自適應(yīng)
- 頁腳最小高度100%保持在頁面底部的布局方法
- 結(jié)構(gòu)中id與class的使用原則與技巧
- 兩個(gè)層之間的為什么會(huì)有間隙(IE3pxbug)?
- Web標(biāo)準(zhǔn)化之form語義結(jié)構(gòu)的實(shí)例
- 酷:你的標(biāo)記你作主,自定義標(biāo)記網(wǎng)頁布局!
- DreamweaverCS3中的CSS布局規(guī)則
- DIVCSS網(wǎng)頁布局:HTML結(jié)構(gòu)化DIVCSS網(wǎng)頁布局入門指南
- 網(wǎng)站變黑灰色CSS濾鏡代碼
猜你也喜歡看這些
- CSS背景圖片background-image須注意路徑問題!
- DIV CSS布局入門示例(二)寫入整體層結(jié)構(gòu)與CSS
- CSS實(shí)例:無懈可擊的CSS圓角技術(shù)!
- CSS菜單:基本橫向菜單效果超炫
- DivCSS實(shí)例:一個(gè)效果很不錯(cuò)的CSS列表
- CSS實(shí)例教程:用列表ul制作CSS橫向菜單的基礎(chǔ)知識(shí)
- CSS技巧:text-indent隱藏文字(以圖換字)
- CSS表格樣式:CSS JS打造可伸縮的表格
- 用css網(wǎng)站布局之十步實(shí)錄!(一)
- css圓角之有序列表dl、無序列表ul如何實(shí)現(xiàn)?
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-CCS中Float的實(shí)質(zhì)
。