細談CSS布局方式

一、CSS布局方式分類

　　[1].預設文檔流方式：以預設的html元素的結構順序顯示 

　　[2].浮動布局方式：通過設定html的float屬性顯示,值：none不浮動、left對象向左浮動，而後面的内容流向對象的右側、right對象向右浮動，而後面的對象流向對象的左側(取消獨占一行的行為，允許别人與其一行，其實是這個塊從文檔流中分離出來，他之後的對象視它不存在) 

　　[3].定位布局方式：通過設定html的position屬性顯示

　　　　position設定對象的定位方式，

　　　　值：static(靜态定位，頁面中的每一個對象的預設值) 

　　　　　　absolute(絕對定位,将對象從文檔流中分離出來，通過設定left、right、top、bottom四個方向相對于父級對象進行絕對定位，如果不存在這樣的父級對象，則依據body對象) 

　　　　　　relative(相對定位，對象不從文檔流中分離出來，通過設定left、right、top、bottom四個方向相對于自身位置進行相對定位)

　　　　注意：當想使用相對于父元素的絕對定位時，必須要有兩個條件：

　　　　　　　　1.必須給父元素加定位屬性，一般建議使用：position：relative。(不指定時預設為body)

　　　　　　　　2.給子元素，加絕對定位position：absolute，同時要加方向屬性（left/right/top/bottom）.

　　　　　　　　3.絕對定位是以父元素為基準點進行定位(會脫離文檔流)。相對定位是以其本身為基準點進行定位(離開原位置但是還占據着位置，未脫離原文檔流)。