CSS中很多時(shí)候會(huì)用到浮動(dòng)來(lái)布局，也就是經(jīng)常見(jiàn)到的float:left或者float:right，簡(jiǎn)單點(diǎn)來(lái)說(shuō)，前者是左浮動(dòng)(往左側(cè)向前邊的非浮動(dòng)元素飄，全是飄得元素的話，就按照流式來(lái)浮動(dòng)從左到右，放不下則換行)，后者是右?。ㄍ绎h）動(dòng)。但僅僅是如此嗎？

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)元素顯示問(wèn)題。

3、  多個(gè)浮動(dòng)方向一致的元素使用流式排列，此時(shí)要注意浮動(dòng)元素的高度。

4、子元素全為浮動(dòng)元素的元素高度自適應(yīng)問(wèn)題。

以下詳細(xì)分析四個(gè)問(wèn)題。

一、浮動(dòng)元素自動(dòng)變塊級(jí)元素

首先說(shuō)說(shuō)塊級(jí)元素和行內(nèi)元素區(qū)別，簡(jiǎn)單的來(lái)說(shuō)，塊級(jí)元素獨(dú)占一行，可以設(shè)置寬高以及邊距，行內(nèi)元素不會(huì)獨(dú)占一行，設(shè)置寬高行距等不會(huì)起效。常見(jiàn)的塊級(jí)元素有：h1~h6、p、div、ul、table，常見(jiàn)的行內(nèi)元素有：span、a、input、select等。

示例代碼：

<div style="height: 200px; width: 200px;">

        <span style="float: left; width: 150px; height: 150px; margin: 5px; padding: 5px;

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

    </div>

    <div style="height: 200px; width: 200px;">

        <span style="width: 150px; height: 150px; margin: 5px; padding: 5px; border: solid 1px red;

            background-color: Olive;">浮動(dòng)元素span</span>

    </div>

效果如下：

二、浮動(dòng)元素后的非浮動(dòng)元素問(wèn)題

浮動(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)元素“之下”顯示。

示例代碼如下：

<div style="width: 600px; height: 500px; border: solid 1px blue; background-color: yellow;">

        <div style="float: left; width: 250px; height: 250px; border: solid 1px Aqua; background-color: gray;

            margin: 10px 0 0 10px;">

            浮動(dòng)DIV</div>

        <div style="background-color: red; border: solid 1px green; width: 300px; height: 150px;">

            跟在浮動(dòng)元素后邊的DIV</div>

        <span style="background-color: red; border: solid 1px green; margin: 0 0 0 -50px;">

        跟在浮動(dòng)元素后邊的span</span>

    </div>

效果圖如下：

從圖中可以看出來(lái)，跟在浮動(dòng)div后邊的div背景以及邊框被壓在了底下，內(nèi)容卻沒(méi)有，span整體都在浮動(dòng)div之上顯示。

不過(guò)在ie6這個(gè)效果卻很怪異，如圖：

浮動(dòng)元素沒(méi)有壓在非浮動(dòng)div之上，反而把span壓住了。

三、多個(gè)并列同方向浮動(dòng)元素高度不一致問(wèn)題

多個(gè)同方向浮動(dòng)元素若是高度不一致的話，很可能會(huì)得到意外的效果，跟你想要的布局差別很大。多個(gè)同方向浮動(dòng)元素一般是按照流式布局，一行滿(mǎn)了則自動(dòng)換行，也就是類(lèi)似于以下效果：

但各個(gè)浮動(dòng)元素高度不一致的話效果很可能出現(xiàn)下邊的情況：

很意外吧，主要排列到元素7的時(shí)候，一行已經(jīng)顯示不下了，所以要換行，但此處換行并不是從行頭開(kāi)始，而是從元素5那開(kāi)始，因?yàn)樵?/span>5比元素6高很多導(dǎo)致。

四、子元素全為浮動(dòng)元素高度自適應(yīng)問(wèn)題

由于元素浮動(dòng)后脫離了文檔流，所以父元素是無(wú)法根據(jù)元素來(lái)自適應(yīng)的。解決此問(wèn)題最常用的辦法由兩種，第一種就是在所有浮動(dòng)元素后加:

<div style="clear:both;height:0px;"></div>

第二種辦法，使用萬(wàn)能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;

        }