如何正確的理解CSS的float浮動屬性？_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

　　
　　首先我們了解到，CSS網(wǎng)頁布局的原理，就是按照HTML代碼中對象聲明的順序，以流布局的方式來顯示它，而流布局就不得不說到float浮動技術(shù)，在HTML中的所有對象，默認分為兩種：塊元素(block element)、內(nèi)聯(lián)元素(inline element)，雖然也存在著可變元素，但只是隨上下文關(guān)系確定該元素是塊元素或者內(nèi)聯(lián)元素。關(guān)于塊元素和內(nèi)聯(lián)元素可以參考這里。

　　其實CSS的float屬性，作用就是改變塊元素(block element)對象的默認顯示方式。block對象設(shè)置了float屬性之后，它將不再獨自占據(jù)一行。可以浮動到左側(cè)或右側(cè)，關(guān)于float屬性的具體說明可以參考這里。

　　需要引起你重視的是，float屬性不是你所想象的那么簡單，不是通過這一篇文字的說明，就能讓你完全搞明白它的工作原理的，我們需要在實踐中不斷的總結(jié)經(jīng)驗，應對所出現(xiàn)的問題。我們通過下面的這個小例子，來說明它的基本工作情況。

　　我們看下面的CSS代碼：

示例代碼 [www.wf0088.com]

.left{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
}
.leftfloat{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
float:left;
}
.right{
background-color:#cccccc;
border:2px solid #333333;
height:100px;
}

　　left和right為不作任何浮動的類。leftfloat向左浮動的類。

　　我們再看看xhtml代碼：

示例代碼 [www.wf0088.com]

<div class="left">div left float:none</div>
<div class="right">div right [www.mb5u.ocm]</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right [www.mb5u.ocm]</div>
<span class="left">span left float:none</span>
<span class="right">span right</span>

　　我們看運行效果：

代碼調(diào)試框 [www.wf0088.com]

[ 可先修改部分代碼再運行查看效果 ]

　　我們看(1)和(2)：容器(1)沒有任何浮動，占據(jù)了一整行，將(2)擠到了下面一行。而且(2)也占據(jù)了一整行的位置。
　　我們看(3)和(4)：容器(3)聲明了左浮動，容器(4)浮動到了它的右側(cè)。實現(xiàn)了這兩個容器處于同一行的情況。
　　我們看(5)和(6)：容器(5)和(6)是span元素，也就是內(nèi)聯(lián)元素(inline element)，自然的處于同一行。
　　