---

※ 本文轉錄自 ott 看板

---

       

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

來源:天下整理

作者:52css整理更新

時間:2007-02-01
       　　
       　　首先我們了解到，CSS網頁布局的原理，就是按照HTML代碼中對象聲明
       的順序，以流布局的方式來顯示它，而流布局就不得不說到float浮動技術
       ，在HTML中的所有對象，默認分為兩種：塊元素(blockelement)、內聯元素
       (inline element)，雖然也存在著可變元素，但只是隨上下文關系確定該元素
       是塊元素或者內聯元素。關于塊元素和內聯元素可以參考這里。
       
       
       　　其實CSS的float屬性，作用就是改變塊元素(block element)對象的默認
       顯示方式。block對象設置了float屬性之后，它將不再獨自占據一行。
       可以浮動到左側或右側，關于float屬性的具體說明可以參考這里。
       
       
       　　需要引起你重視的是，float屬性不是你所想象的那么簡單，不是通過
       這一篇文字的說明，就能讓你完全搞明白它的工作原理的，我們需要在實踐
       中不斷的總結經驗，應對所出現的問題。我們通過下面的這個小例子，來說
       明它的基本工作情況。
       
       　　我們看下面的CSS代碼：
       
        Example Source Code [mid.lt263.com/mb]

       .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代碼：
       
        Example Source Code [mid.lt263.com/mb]

       <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>
       
       　　我們看運行效果：
       
        Source Code to Run [mid.lt263.com/mb]
       
         [ 可先修改部分代碼 再運行查看效果 ]


   http://mid.lt263.com/mb/divcssjiaocheng/14352.html




--
※ 來源: DISP BBS (http://disp.cc)
※ 作者: ott  來自: 118.166.5.78  時間: 2010-03-25 22:54:41推 uefangsmith:Bravo.... 借轉>>123.110.210.226 03-25 23:16

--
※ 來源: DISP BBS (http://disp.twbbs.org)
※ 作者: uefangsmith  來自: 123.110.210.226  時間: 2010-03-25 23:16:54

※ 編輯: uefangsmith  來自: 123.110.210.226  時間: 2010-03-25 23:18:14