看板 uefacool
作者 標題 [轉錄] 如何正確的理解CSS的float浮動屬性?-DivCSS教程
時間 2010年03月25日 Thu. PM 11:16:54
※ 本文轉錄自 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
回列表(←)
分享