CSS中的浮動和定位

• 寫博原因
• 定位
  • 固定 fixed
  • 靜止 static
  • 相對 relative
  • 絕對 absolute
• 浮動
  • 左右浮動
  • 清除浮動
• 總結

寫這篇部落格的原因

    牛腩的新聞發布系統功能已經全部實現，但是看了看頁面，很是歪瓜裂棗，與原作和很多網頁一比，實在是不堪入目，如：

   

    我知道你想說什麼，我覺得也是。人靠衣裝美靠靚妝，網頁靠什麼裝？還是靠CSS吧。究其原因，還是對css中浮動和定位理解太淺，加上沒有美術細菌導致，下面就較為仔細的說說浮動和定位。

定位

定位指的是確定某個元素的顯示位置，定位有兩個重要的因素，一個是相對於誰；一個是原空間的有無。

靜止static

元素框正常產生。區塊層級元素產生一個矩形框，作為文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。
相對relative
元素框位移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。
絕對absolute
元素框從文檔流完全刪除，並相對於其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素定位後產生一個塊級框，而不論原來它在正常流中產生何種類型的框。
固定fixed
元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。

浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。稍解釋一下，框可以向左右浮動，浮動以父級元素為基準，由於浮動只是確定方向，並沒有用距離加以規定，那什麼時候停止移動？當它浮動過程中碰到父級元素的框或是碰到另外一個浮動框的邊框的時候停止，由於浮動框脫離了標準流，標準流中的其它元素該怎麼排列還怎麼排列，與這個浮動的無關。

左右浮動樣本

為了方便簡潔的示範，使用的是w3school的線上測試載入器，以三張圖片樣本示範，第一張圖片為“apple”，第二張為“cute”，第三張為“background”。

未操作前：

 apple向右浮動：

僅僅是apple向右浮動了，而其它兩張圖片的排列並未有任何變化，這就是“文檔的普通流中的塊框表現得就像浮動框不存在一樣”。

apple向右浮動，cute向左浮動後：

可以看到浮動後，因為它們的父級元素相同，均為外面的框，apple由於向右浮動，移動到介面最右側，cute由於向左浮動，移動到最左側。需要注意的是cute由原來的靠下的位置浮動後靠上了。

        均向左浮動：

表現為這樣是因為，apple最先執行向左浮動，佔據最前的位置，當cute相對父級元素向左浮動時，本應也是apple的位置，但是已被apple佔據，當cute浮動過程中碰到了apple的右邊框時即停止浮動，background圖片雷同。

“意外”浮動：

如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”。

清除浮動

clear 屬性規定元素的哪一側不允許其他浮動元素。

均向右浮動：

清除左右浮動：

原因是，apple兩側均不允許出現浮動，cute只能向下移動，直到脫離apple的左右範圍，background雷同。

總結

浮動和定位實際上都可以算是“定位”，即根據顯示的需要定義指定元素出現的位置，當然css內容要比這多得多，此處只是簡單的介紹一下定位和浮動。