html是按照檔案流（普通流）的方式載入的，但是全部是普通流的話，很多好看的樣式是實現不了的，所以出現了浮動，相對定位，絕對定位的概念。
一、首先，按照普通流和非普通流來分類：
①普通流：就是按照上下左右的順序一行一行排列的，長度不夠就會自動擠到下一行。
②非普通流：顧名思義就是脫離普通流的，在普通流上面是不佔據位置的。css有position的樣式，position包括：static，relative，absolute，fixed四種值。其中static是屬於普通流；relative也是屬於特殊的普通流，詳細下面有介紹；absolute和fixed以及float就是屬於非普通流的，載入的時候，也會順序載入，但是會脫離普通流的位置。
二、分別介紹static,relative,absolute,fixed和float（通過top,left,right,bottom來設定相對定位）
①static：就是預設的普通流，不手動設定position樣式的話，預設就是static；
②relative：叫相對定位，指的是相對他自己原來的位置的相對位置，並且原來的位置還是佔著的（所以說屬於特殊的普通流），其他的元素不會填上去，但是設定好相對位置之後，他新的位置是不會擠壓其他元素的，就像把該元素從原來的位置上摳出來，放在單獨一層來布局。
③absolute:叫絕對定位，指的是①相對其父元素位置的絕對定位，但是他屬於非普通流，②原來的位置是不會佔著的，是單獨的一層，脫離了普通流。除了以上兩點，其他的和relative差不多。
④fixed：叫固定定位，指的是元素相對於瀏覽器視窗的定位（比如一些**兩邊的廣告），拉動滾動條，他也不會跟著動，也是屬於非普通流，其他的跟relative差不多。
⑤float：叫浮動，是css單獨的樣式，有top，right，bottom，left四種常用值，以上四個是屬於position的一種；float也是屬於普通流，單會改變普通流。他只能和普通流在同一層，但是可以改變元素的位置，同樣是佔著位置的（和relative有點像），不會單獨一層（而relative，absolute，fixed會單獨一層，可以設定z-index屬性來改變其前後位置）。使用float之後，元素則會脫離普通流，該元素則在普通流上不再占用位置，普通流的元素則會填補上去，這樣如果不去設定的話則會出現重疊覆蓋的情況；如果想使用了float的元素也佔著普通流上的位置，該如何辦呢？這時候，可以把應用了float樣式的元素緊接著的元素應用clear樣式，clear樣式包括：both，right，left三個值。both表示right和left的float都清除掉，另外兩個同理。這樣子則可以清除在此之前的非普通流，讓他們也佔著普通流上的位置，但是這只是佔著位置，其實該元素是不存在於該位置的，該位置不存在任何元素（詳細自己google理解），但是這樣子的話，緊接著的那個元素想設定margin等，是會出現問題的，因為應用了float樣式的元素霸佔的那個位置其實是什麼東西也沒有的，不存在邊界，所以應用margin則不會以那個元素（應用了float的那個）為邊界的，會跳過那個邊界來計算，當然你也可以把margin設大點（也就是加上float元素的長度或者寬度）也可以達到效果。其實，可以在float後面的元素之前，單獨加個 清楚元素來專門用於清除浮動即可，接下來的元素應用margin則可以正常起效（補充：其實一般來說，可以在樣式表裡面單獨設定 .clear 這樣的樣式來專門用於清除浮動，避免重複，**會規優雅規範很多）。
三、z-index作用
可以用來處理非普通流元素的前後位置，z-index越大，元素就在越前面(同時存在普通流和非普通流的時候才有意義）。
四、塊元素和行內元素一些差別
①塊元素才有width,height屬性，而行內元素沒有；
②每個塊元素預設自動佔一行，而行內缺省會擠滿一行才會繼續下一行；
③行內元素在css加上「display：block」則可以使該元素變成塊元素；
……
css 浮動 相對定位 絕對定位區別
html是按照檔案流 普通流 的方式載入的，但是全部是普通流的話，很多好看的樣式是實現不了的，所以出現了浮動，相對定位，絕對定位的概念。一 首先，按照普通流和非普通流來分類 普通流 就是按照上下左右的順序一行一行排列的，長度不夠就會自動擠到下一行。非普通流 顧名思義就是脫離普通流的，在普通流上面是不...
css浮動，絕對，相對定位
浮動 float 屬性 float none 預設值，物件，不漂浮 float left 文字流向物件的右邊 float right 清除浮動 clear 屬性 clear none 允許物件兩遍都可以浮動 clear left 不允許左邊有浮動 clear right 不允許右邊有浮動 clear...
css 相對定位 絕對定位 浮動 分析
點評 w3school 站點上的所有頁面都採用了這種技術，如果您開啟我們使用 css 檔案，您會看到我們對頁尾的 div 進行了清理，而頁尾上面的三個 div 都向左浮動。相對定位是乙個非常容易掌握的概念。如果對乙個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個...