css中floatleft與floatright的使用說明_html/css

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ū)別，簡(jiǎn)單的來說，塊級(jí)元素獨(dú)占一行，可以設(shè)置寬高以及邊距，行內(nèi)元素不會(huì)獨(dú)占一行，設(shè)置寬高行距等不會(huì)起效。常見的塊級(jí)元素有：h1~h6、p、div、ul、table，常見的行內(nèi)元素有：span、a、input、select等。

示例代碼：

代碼如下:

border: solid 1px red; background-color: Olive;">浮動(dòng)元素span


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)元素“之下”顯示。
示例代碼如下：

代碼如下:

margin: 10px 0 0 10px;">
浮動(dòng)DIV

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

跟在浮動(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ì)得到意外的效果，跟你想要的布局差別很大。多個(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)元素后加:

第二種辦法，使用萬能clear：

代碼如下:

.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)常看””這樣的代碼，但是你真的能明白它是做什么用的嗎？
如：

代碼如下:

TEST DIV

你可以將此部分代碼放到一個(gè)HTML頁(yè)面看看效果，然后在去掉””看一下效果,就知道這句話的作用了。
如圖：
（1）有clear:both的：

（2）無clear:both的

這樣看，應(yīng)該就一目了然了：原來后邊的Clear:both;其實(shí)就是利用清除浮動(dòng)來把外層的div撐開，所以有時(shí)候，我們?cè)趯?nèi)部div都設(shè)置成浮動(dòng)之后，就會(huì)發(fā)現(xiàn)，外層div的背景沒有顯示，原因就是外層的div沒有撐開，太小，所以能看到的背景僅限于一條線。

但這種辦法就是最好了的嗎？
我這么說，當(dāng)然答案就不是了。可以采用通過Hack實(shí)現(xiàn)：

代碼如下:

TEST DIV

看完解決辦法，咱們來看里邊的原理：
（1）、首先是利用:after這個(gè)偽類來兼容FF、Chrome等支持標(biāo)準(zhǔn)的瀏覽器。
:after偽類IE不支持，它用來和content屬性一起使用設(shè)置在對(duì)象后的內(nèi)容，例如：
a:after{content:"(link)";}
這個(gè)CSS將會(huì)讓a標(biāo)簽內(nèi)的文本后邊加上link文本文字。

（2）、利用“* html”這個(gè)只有IE6認(rèn)識(shí)的選擇符，設(shè)置縮放屬性“zoom: 1;”實(shí)現(xiàn)兼容IE6。
（3）、利用“*:first-child + html”這個(gè)只有IE7認(rèn)識(shí)的選擇符，設(shè)置縮放屬性“zoom: 1;”實(shí)現(xiàn)兼容IE7。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com