顯示廣告
隱藏 ✕
看板 uefacool
作者 uefangsmith(雲飛)
標題 [轉錄] 如何正確的理解CSS的float浮動屬性?-DivCSS教程
時間 2010年03月25日 Thu. PM 11:16:54


※ 本文轉錄自 ott 看板

看板 ott
作者 ott(寶貝)
標題 如何正確的理解CSS的float浮動屬性?-DivCSS教程
時間 2010年03月25日 Thu. PM 10:54:41


       

	
	
如何正確的理解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
※ 看板: uefacool 文章推薦值: 0 目前人氣: 0 累積人氣: 32 
分享網址: 複製 已複製
guest
x)推文 r)回覆 e)編輯 d)刪除 M)收藏 ^x)轉錄 同主題: =)首篇 [)上篇 ])下篇