一、 前言：
浮動和定位的原理一定要深刻掌握！(其實每個原理都要深刻掌握！)如果你隻是知道有float與position這些屬性和他們的值，但是不清楚他們的值到底是怎麼回事，那麼你在寫CSS的時候将會非常的苦惱，由剛開始的熱血沸騰的想讓盒子飛變成了讓自己飛！因為盒子已經不知道飛到哪裡去了，時間長了之後就可能會到九宵雲外，盒子也找不回來了,您也可能崩潰了……
二、 浮動(Float)問題：
我們先來說說浮動問題，浮動是為了定位(這裡的定位不是position).
1. 浮動對鄰居有何影響？
我們先來做一下準備工作
下面是HTML中的内容：
下面是CSS中的内容：
上一張圖：
下面開始讓第一個飛！
在CSS中讓第一個盒子向左float，為了友善觀察它對鄰居到底有何影響，把它的margin值改的大一點。
看圖：
可以看到，當第一個盒子設定為向左浮動的時候，它影響的隻是第二個盒子裡面的内容,同時第一個盒子的寬度已經是按照裡面的内容來定義大小了。第二個盒子會向上移動，也就是忽視第一個盒子的存在。至于它的margin值怎麼計算呢？我想您不會找這樣的麻煩來折磨自己吧……更何況可悲的IE浏覽器也有着自己獨特的計算方法(我們需要的是Web标準！)……這裡設定margin隻是為了讓您知道它的浮動隻對盒子裡的内容産生影響。
2. 浮動對父層級有何影響？
做好準備工作：
以下是HTML中的内容：
以下是CSS中的内容：
這裡隻把第一個盒子設定了向左浮動
下面是效果圖：
可以看到，父層級的盒子會當它不存在，第二個和三個盒子也會當第一個盒子不存在(但裡面的内容不這樣認為)。
好了，現在再把第二個盒子也浮動一下，隻需要改一下CSS：
得到效果：
這裡的margin就值得一說了，我們來看看第一個盒子與第二個盒子之間的距離是多少：
現在浏覽器已經變窄了，可以很明顯的看到兩個盒子之間的距離不隻5個像素，到底是多少呢？猜10px試試,好吧，看看到底是不是：
果然是這樣，切片的高度是10px，這個結論有别于以前說的上下的margin會重疊。
好了，我們現在再回到浮動的盒子對父級的影響吧,在上面的實驗中看到，當設定浮動後，父級塊變的相當沒有權威性，在實際布局中我們絕對不想出現這樣的效果，那麼如何解決呢？父層級需要一個有力的幫手！請往下看。
3. 清除浮動。
還是上面的HTML，把CSS改一下：
把第三個盒子添加屬性：clear:left;
我們再把clear:left改為clear:right
再改為:clear:both
這裡的幾張圖讓您想起了一些東西了嗎？一個簡單的兩列布局是不是就出現了呢？
三、 定位(Position)問題：
首先我們要知道position有哪幾個屬性值:static(這是預設的值，不需要考慮太多)、relative(相對定位)、absolute(絕對定位)、fixed(基于浏覽器的絕對定位),這些是控制大局的東西，還有細節由什麼控制呢？那就是left、top、bottom、right屬性，他們的值可以用相對機關，也可以用絕對機關。
1、 relative：
準備一下代碼：
為下面做參考的圖：
下面把這個盒子相對定位一下：
看細節圖(盒子後面的幻影是盒子原來的位置)：
得出結論：relative這種定位方式是基于他本身原來的位置來定位的。從上面的圖看出，盒子現在的位置距離原來的位置左邊是5px,頂部是5px,對應CSS中的left:5px;top:5px;。同時還可以得出什麼呢？再來看這張圖：
當盒子設定了relative定位方式以後，它不會影響其它的盒子，不管是鄰居還是父級層。也不管它定位到哪裡。
2、 absolute：
還是上面的代碼，直接把relative改為absolute，把left和top的值都改為0，總之把影響觀察的東西通通去掉！
外面的盒子徹底失去了作用……，得出結論，設定了position屬性的盒子會脫離标準進行定位，也就是說它對其它的盒子有影響，什麼影響呢？就是其它的盒子會視它為空氣。那麼裡面的盒子是以浏覽器為基準進行定位的(這是不是最終結論呢？)。我們來把父層級的盒子設定一下，友善觀察。
可以看到，此時裡面的盒子不再以浏覽器為基準進行定位了，而是以設定了retalive屬性的父層級的盒子進行定位了。于是可以得出結論：position定位方式元素的定位基準是距離該元素最近的且設定了非static(也就是不是預設的定位方式)屬性的父級元素。好了，那麼我為什麼不把父級元素設定為fixed或者absolute呢？原因很簡單，因為absolute和fixed的定位方式會脫離标準方式定位(近朱者赤，近墨者黑)。這裡順便把fixed也說了吧，把上面的CSS改一下：
可以看到，fixed不管父層級是如何定位的，始終以浏覽器為基準進行定位。
好了，說的夠多了，再說下去，右邊的滾動條越來越小了，不過也沒有多少東西要說了，更多的細節，您在做的時候多多注意……。