float與position的使用

在用div+css做網頁的時候float是最常用的，相對於position比較好控制一點。

float分為：float：left；float：right；float：none；一般情況下只用前兩個。

浮動從字面意思就知道他是把該層浮起來，在瀏覽器預設的情況下這個位置上是空的，所以在使用float佈局的時候初學者要記得當這一塊做完時清除浮動，不然會影響到下面的佈局，等到用的相當熟練的時候，就不用每個都清除，只清除會影響下面佈局的浮動就行了....

清除浮動，clear：both；一般使用的時候我們是在需要清除浮動的層下面加上一個空層，如下：

<div>
           <img class="left" src="images/levis_1.jpg" alt="baidu"/>
           <img class="right" src="images/levis_2jpg" alt="baidu"/>

          <div class="clear">&nbsp;</div>
</div>

css        .left{float:left;}
             .right{float:right;}

              .clear{clear:both;height:0px;overflow:hidden;}

       再者就是浮動後標籤的一些預設屬性變化，浮動後的層的大小是有內容來定的，也就是說浮動後內容有多大他就預設為多大，我們可以設定他的寬高來控制，行屬性 的標籤在預設屬性下是不能設定寬高的，我們可以用浮動讓他改變他的預設屬性，這樣更有利於我們控制標籤...

       在經過反覆的練習我們會發現，有很多瀏覽器在層與層之間有預設的間距，看似很小的間距大卻會影響整體的佈局，讓人很反感，這時候我們可以選擇讓這些有預設間距的層浮動來消除間距，因為浮動後的層都是緊挨這的沒有間隙..

        position定位佈局，該屬性常用的值有relative（相對），absolute（絕對）；z-index；

       1：設定了position:relative而不設定left,top等屬性的時候，層顯示的位置和不設定position屬性或者position值取static時一樣。

        2：當一個層設定了position:relative，而且使得層位置產生相對偏移時，並不影響文字流中接下來的其他層的位置。

     當我們設定position的值為relative時，層依然存在於文字流中，也就是不管位置是否偏移，文字流中依然為它保留了該有的位置。但當層設定了position:relative併產生偏移（設定了top,left等值）時，該層將完全從文字流中脫離，進而以該層所在的父容器的座標原點為參考點進行偏移，可以這理解，該層已經和同級容器中的其它元素脫離了關係，也不會對其它元素產生人和影響。

      一般我們在使用定位佈局的時候，通常情況下是在父級標籤上設position:relative，在需要定位的層上設position:absolute；top：20px；left：10px；，這樣控制起來相對比較好控制...

          我個人認為還是用float佈局比較好， position在JavaScript上用得比較多，當然了只要用的多了，達到了一定的熟練程度用什麼來佈局都不成問題的，關鍵是要多做多練，多總結..