首先我們了解到，CSS網頁布局的原理，就是按照HTML代碼中對象聲明的順序，以流布局的方式來顯示它，而流布局就不得不說到float浮動技術，在HTML中的所有對象，默認分為兩種：塊元素(block element)、內聯元素(inline element)，雖然也存在著可變元素，但只是隨上下文關系確定該元素是塊元素或者內聯元素。關于塊元素和內聯元素可以參考這里。
其實CSS的float屬性，作用就是改變塊元素(block element)對象的默認顯示方式。block對象設置了float屬性之后，它將不再獨自占據一行。可以浮動到左側或右側。
需要引起你重視的是，float屬性不是你所想象的那么簡單，不是通過這一篇文字的說明，就能讓你完全搞明白它的工作原理的，我們需要在實踐中不斷的總結經驗，應對所出現的問題。我們通過下面的這個小例子，來說明它的基本工作情況。
我們看下面的CSS代碼：
| 以下為引用的內容： 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代碼：
| 以下為引用的內容： <div class="left">div left float:none</div> <div class="right">div right [www.jyygyx.com]</div> <div class="leftfloat">div left float:left</div> <div class="right">div right [www.jyygyx.com]</div> <span class="left">span left float:none</span> <span class="right">span right</span> |
提示：可修改后代碼再運行!
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
