靳氏DIV布局相容“武林秘訣”

1、學習DIV的方法

第一，掌握css、html文法。css中除了一般文法之外，特別是float、clear、overflow、line-height等，對於html標籤重點是div、ul、li、dl、dd等幾個。
第二，其實div最好的教程就是你把qq.com  163.com  sohu.com ifeng.com這幾個大門戶網站的做法研究一下 ，如果你一下子看不懂這麼大的網站，可以參考我講課中帶著學生一起開發的www.ccopen.net
及www.chinajwork.org。

2、讓DIV相容的方法：

  靳氏相容(ie6、ie7、ff)口決：

    有浮必清，方能相容；
    統一預設，盡量為零；
    有高則高，無高而高，
    規規整整，方能大成！
    (出自 www.zuoyefeng.com
)

  有浮必清，方能相容


  在使用浮動標籤後(float:left)，後面div一定要清除浮動(clear:left;)。

   這樣才能相容ie6、ie7、ff，否則將出來布局混亂。
            樣本：
            <div style="float:left;width:200px;">1 </div>  
          <div style="float:right;width:200px;">2 </div>
          <div style="clear:left;width:200px;">3 </div>

  統一預設，盡量為零

  不同的瀏覽器預設值是不一樣的。比如：對於ul li標籤的margin屬性，各不相同。因此，我們在做網站時，先要定義一些全域的樣式表，一來約束整站，二來統計預設值。從而達到相容之目的，這叫“統一預設”，正是“集中思想，統一戰線”。

  <style>
  ul,li,body{margin:0px;padding:0px;}
  div,table{margin:2px;padding:2px;overflow:hidden;}
</style>
  
盡量為零是指，當我們使用div的時候，盡量明確它們的margin和padding值，不要預設，如果不需要有間距，定義為0。

有高則高，無高而高

  這兩點最重點，可謂是經驗中的經驗。所謂有高則高，就是當你定義div的高度（height）的時候，一定要定義行高（line-height）。這個做法，對相容ie6、ie7特別重要。
比
如： <div style="height:2px"> </div>
這個二像索高的div，在ie6和ie7中是有差別的，加上 <div
style="height:2px;line-height:2px;"> </div> 或 <div
style="height:2px;overflow:hidden;"> </div>之後，就相同了，這隻是一例。
所以有高則高就是，定義了高度，就要定義overflow或者line-height，或者二者都定義，則相容之。

無高而高，如果你想讓文字或圖片把div撐開，一定不要定義高度；反之，你定義了高度，ie一般可發撐開，但ff是撐不開的。
同時，當你不希望div被掌握開時，你會定義高和寬，此時，你最好再定義一個overflow:hidden; 不加捲軸;overflow:auto;自動。簡言之，不對div定義高度，內容可以把div撐開，就是div跟著內容走，故言“無高而高”。

規規整整，方能大成！

最後，我說的是，編程、做div、寫代碼的習慣，那就是要“像詩歌一樣，講究推敲；像風景一樣，優美舒暢”。因為，你寫的亂七八糟，將會越多越亂，最後整個一個豆腐渣工程。不但日後很難修改，你也不能重複利用。

OK，用我的口決，大家可以解決你DIV編程中90%以上的問題。