資源描述：
《合理應(yīng)用,正確理解css的float浮動屬性》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、合理應(yīng)用,正確理解CSS的float浮動屬性>>edu.5151doc.教育資源庫 首先我們了解到，CSS網(wǎng)頁布局的原理，就是按照HTML代碼中對象聲明的順序，以流布局的方式來顯示它，而流布局就不得不說到float浮動技術(shù)，在HTML中的所有對象，默認(rèn)分為兩種：塊元素(blockelement)、內(nèi)聯(lián)元素(inlineelement)，雖然也存在著可變元素，但只是隨上下文關(guān)系確定該元素是塊元素或者內(nèi)聯(lián)元素。關(guān)于塊元素和內(nèi)聯(lián)元素可以參考這里?！ ∑鋵岰SS的float屬性，作用就是改變塊元素(blockelement)對象的默認(rèn)顯示方式。block對象
2、設(shè)置了float屬性之后，它將不再獨自占據(jù)一行?？梢愿拥阶髠?cè)或右側(cè)，關(guān)于float屬性的詳細(xì)說明可以參考這里。 需要引起你重視的是，float屬性不是你所想象的那么簡單，不是通過這一篇文字的說明，就能讓你完全搞明白它的工作原理的，我們需要在實踐中不斷的總結(jié)經(jīng)驗，應(yīng)對所出現(xiàn)的問題。我們通過下面的這個小例子，來說明它的基本工作情況?！ ∥覀兛聪旅娴腃SS代碼：.left{background-color:#cccccc;border:2pxsolid#333333;l代碼：<divclass="left">divleftfloat:none<
3、;/div><divclass="right">divright[.jzxue.]</div><divclass="leftfloat">divleftfloat:left</div><divclass="right">divright[.jzxue.]</div><spanclass="left">spanleftfloat:none</span><spanclass="right">spanright</span> 我們看運(yùn)行效果：<htmlxmlns=".l"><head>
4、<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>正確理解cssfloat屬性--建站學(xué)</title><styletype="text/css"><!--.left{background-color:#cccccc;border:2pxsolid#333333;]</div><divclass="leftfloat">divleftfloat:left</div><divclass="right">div
5、right[.jzxue.ocm]</div><spanclass="left">spanleftfloat:none</span><spanclass="right">spanright</span></body></html>12下一頁[這篇文章來自..，][Ctrl+A全部選擇提示：你可先修改部分代碼，再按運(yùn)行] 我們看(1)和(2)：容器(1)沒有任何浮動，占據(jù)了一整行，將(2)擠到了下面一行。而且(2)也占據(jù)了一整行的位置?！ ∥覀兛?3)和(4)：容器(3)聲明了左浮動，容器(4)浮動到了它的右側(cè)
6、。實現(xiàn)了這兩個容器處于同一行的情況?！ ∥覀兛?5)和(6)：容器(5)和(6)是span元素，也就是內(nèi)聯(lián)元素(inlineelement)，自然的處于同一行。上一頁12[這篇文章來自..，]
