CSS的定位機制有3種:   普通流  浮動(float : left / right / none)  和 定位(position : static / relative / absolute)

普通流:正常的文件流，在HTML裡面的寫法就是從上到下，從左到右的排版佈局...塊元素一個接著一個,填滿瀏覽器視窗或其他視窗元素的所有可用寬度...普通流中的物件影響它們周圍物件的佈局...(文件流:是指從上到下,從左到右,一個挨一個的簡單的正常的佈局方式)

 一般在HTML元素分為兩種：塊級元素和行內元素。像div,p這些的元素屬於塊級元素；而span,strong等屬於行內元素。塊級元素是從上到下一行一行的排列，預設一個塊級元素會佔用一行，而跟在後面的元素會令起一行排列；行內元素是在一行中水平佈置，從前到後的排列；如下面的

<div style="background-color:Blue" mce_style="background-color:Blue">我是塊級元素，我單獨佔一行</div>  
   <div style="background-color:Yellow" mce_style="background-color:Yellow">我是塊級元素，我一行一行的排列</div>  
   <span style="background-color:Green" mce_style="background-color:Green">我的行內元素，我水平的排列</span>  

只要給某個DIV進行float屬性或者position:absolute（不包括static/relative，這兩個依然保持正常的文件流）,則這個DIV完全脫離文件流,不佔任何空間,不用擔心撐開它...

浮動(float : left / right / none/inherit):脫離文件流，不佔空間

儘可能向左或者向右移動元素,允許後面的內容環繞它

浮動元素在包含元素的內容區域,不能擴充套件到段落的填充區域浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止

所有的浮動元素都表現得像塊級元素無論是浮動塊級元素還是內嵌元素,都遵循塊級別元素的顯示規則,四個方向的空白邊都會呈現出來...

~浮動內嵌元素

*提供浮動文字的寬度

*浮動內嵌元素表現為塊元素

~浮動塊級元素

*必須提供浮動塊元素的寬度

浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止....

由於浮動框不在文件流的普通流中,所以文件的普通流中的邊框表現的就像浮動框不存在一樣...