css中float left與float right的使用說明

css中float left與float right的使用說明

ID：38100804

大?。?5.76 KB

頁數(shù)：11頁

時(shí)間：2019-06-06

css中float left與float right的使用說明_第1頁
css中float left與float right的使用說明_第2頁
css中float left與float right的使用說明_第3頁
css中float left與float right的使用說明_第4頁
css中float left與float right的使用說明_第5頁
資源描述：

《css中float left與float right的使用說明》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、No!要注意以下幾點(diǎn)：1、浮動(dòng)元素會(huì)被自動(dòng)設(shè)置成塊級(jí)元素，相當(dāng)于給元素設(shè)置了display:block（塊級(jí)元素能設(shè)置寬和高，而行內(nèi)元素則不可以）。2、浮動(dòng)元素后邊的非浮動(dòng)元素顯示問題。3、多個(gè)浮動(dòng)方向一致的元素使用流式排列，此時(shí)要注意浮動(dòng)元素的高度。4、子元素全為浮動(dòng)元素的元素高度自適應(yīng)問題。以下詳細(xì)分析四個(gè)問題。一、浮動(dòng)元素自動(dòng)變塊級(jí)元素首先說說塊級(jí)元素和行內(nèi)元素區(qū)別，簡單的來說，塊級(jí)元素獨(dú)占一行，可以設(shè)置寬高以及邊距，行內(nèi)元素不會(huì)獨(dú)占一行，設(shè)置寬高行距等不會(huì)起效。常見的塊級(jí)元素有：h1~h6、p、div、ul、table，常見的行內(nèi)元素有：

2、span、a、input、select等。示例代碼：復(fù)制代碼代碼如下:浮動(dòng)元素span

3、t:150px;margin:5px;padding:5px;border:solid1pxred;background-color:Olive;">浮動(dòng)元素span

效果如下：二、浮動(dòng)元素后的非浮動(dòng)元素問題浮動(dòng)元素后邊的元素若是非浮動(dòng)行內(nèi)元素且因?yàn)槎ㄎ划a(chǎn)生重疊時(shí)，行內(nèi)元素邊框、背景和內(nèi)容都在該浮動(dòng)元素“之上”顯示，若是非浮動(dòng)塊級(jí)元素跟在浮動(dòng)元素后邊且在定位后產(chǎn)生重疊時(shí)，該塊級(jí)元素邊框和背景在該浮動(dòng)元素“之下”顯示，只有內(nèi)容在浮動(dòng)元素不在浮動(dòng)元素“之下”顯示。示例代碼如下：復(fù)制代碼代碼如下:

4、:600px;height:500px;border:solid1pxblue;background-color:yellow;">浮動(dòng)DIV

跟在浮動(dòng)元素后邊的D

5、IV

跟在浮動(dòng)元素后邊的span效果圖如下：從圖中可以看出來，跟在浮動(dòng)div后邊的div背景以及邊框被壓在了底下，內(nèi)容卻沒有，span整體都在浮動(dòng)div之上顯示。?不過在ie6這個(gè)效果卻很怪異，如圖：浮動(dòng)元素沒有壓在非浮動(dòng)div之上，反而把span壓住了。三、多個(gè)并列同方向浮動(dòng)元素高度不一致問題多個(gè)同方向浮動(dòng)元素若是高度不一致的話，很可能會(huì)得到意外的效果，跟你想要的布局

6、差別很大。多個(gè)同方向浮動(dòng)元素一般是按照流式布局，一行滿了則自動(dòng)換行，也就是類似于以下效果：但各個(gè)浮動(dòng)元素高度不一致的話效果很可能出現(xiàn)下邊的情況：很意外吧，主要排列到元素7的時(shí)候，一行已經(jīng)顯示不下了，所以要換行，但此處換行并不是從行頭開始，而是從元素5那開始，因?yàn)樵?比元素6高很多導(dǎo)致。四、子元素全為浮動(dòng)元素高度自適應(yīng)問題由于元素浮動(dòng)后脫離了文檔流，所以父元素是無法根據(jù)元素來自適應(yīng)的。解決此問題最常用的辦法由兩種，第一種就是在所有浮動(dòng)元素后加:第二種辦法，使用萬能c

7、lear：復(fù)制代碼代碼如下:.clearfix:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0;}*html.clearfix{zoom:1;}*:first-child+html.clearfix{zoom:1;}然后在你需要自適應(yīng)的元素上加上class=”clearfix”即可。詳細(xì)請(qǐng)參考：你真的理解clear：both嗎在開發(fā)中，從美工MM給你Html代碼中，肯定能經(jīng)?？础?divstyle="clear:both;">

8、iv>”這樣的代碼，但是你真的能明白它是做什么用的嗎？如：復(fù)制代碼代碼如下:

當(dāng)前文檔最多預(yù)覽五頁，下載文檔查看全文

此文檔下載收益歸作者所有

當(dāng)前文檔最多預(yù)覽五頁，下載文檔查看全文
溫馨提示：
1. 部分包含數(shù)學(xué)公式或PPT動(dòng)畫的文件，查看預(yù)覽時(shí)可能會(huì)顯示錯(cuò)亂或異常，文件下載后無此問題，請(qǐng)放心下載。
2. 本文檔由用戶上傳，版權(quán)歸屬用戶，天天文庫負(fù)責(zé)整理代發(fā)布。如果您對(duì)本文檔版權(quán)有爭(zhēng)議請(qǐng)及時(shí)聯(lián)系客服。
3. 下載前請(qǐng)仔細(xì)閱讀文檔內(nèi)容，確認(rèn)文檔內(nèi)容符合您的需求后進(jìn)行下載，若出現(xiàn)內(nèi)容與標(biāo)題不符可向本站投訴處理。
4. 下載文檔時(shí)可能由于網(wǎng)絡(luò)波動(dòng)等原因無法下載或下載錯(cuò)誤，付費(fèi)完成后未能成功下載的用戶請(qǐng)聯(lián)系客服處理。