CSS定位與浮動

定位是對元素進行定位。定位的基本思想很簡單，它允許你定義元素框相對於其正常位置應該出現的位置，或者相對於父元素、另一個元素甚至瀏覽器窗口本身的位置。浮動不完全是定位，不過，它當然也不是正常流佈局。

一切標籤都是框：div、h1 或 p 元素常常被稱爲塊級元素。這意味着這些元素顯示爲一塊內容，即“塊框”。與之相反，span 和 strong 等元素稱爲“行內元素”，這是因爲它們的內容顯示在行中，即“行內框”。

普通流,CSS有三種基本的定位機制，普通流，浮動和絕對定位。除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定，它也叫文檔流吧。

display 屬性規定元素應該生成的框的類型。這個屬性用於定義建立佈局時元素生成的顯示框類型。對於 HTML 等文檔類型，如果使用 display 不謹慎會很危險，因爲可能違反 HTML 中已經定義的顯示層次結構。對於 XML，由於 XML 沒有內置的這種層次結構，所有 display 是絕對必要的。默認值是inline，此元素前後會被顯示爲內聯元素，元素前後沒有換行符。

position 屬性規定元素的定位類型。可能的值有absolute，fixed，relative，static。默認值爲static，沒有定位，元素出現在正常的流中。這裏會忽略top, bottom, left, right 或者 z-index 聲明。（下面講到不忽略的）

固定定位fixed表示生成絕對定位的元素，相對於瀏覽器窗口進行定位，元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。下同，不過下面的用的廣一下咯。

相對定位relative，在原來的文檔中，一個元素框本來應該出現的位置爲原始位置，現在在原始位置的基礎上進行移動，這種移動就叫做相對定位。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

上面代碼表示在原來的框的基礎上向下移動20像素，向右移動30像素。相對定位是在文檔流之中的，因爲它必須先知道在文檔流之中屬於它的位置然後再進行移動的。它的移動如果跟別的內容重合，那麼肯定會覆蓋別的內容的。

絕對定位absolute，它不在原來的文檔流之中，因此不佔據空間。絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。因爲絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置z-index屬性來控制這些框的堆放次序。大致的意思是它的位置相對於它的父親元素框。在父親元素框內進行絕對定位。這裏可以控制堆放次序，還是因爲它與原來的文檔流是無關的，與父親元素框裏的其他子元素屬於不同的次元，所以設置優先級就會決定誰可以覆蓋誰。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

浮動float屬性，實現了元素的浮動，float 屬性定義元素在哪個方向（左或者右，儘可能往上擠）浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會儘可能地窄。假如在一行之上只有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間爲止。可能的值有left元素向左浮動，right元素向右浮動，默認是none，元素不浮動，會出現在它應該出現的位置。這個浮動不是飄來飄去，顯示的是直接浮動過去之後的樣子。如果把一個列表的每一行元素都設置爲向左浮動，那麼它們可能會處在同一行之中，這就可以做出水平的菜單欄，當然如果瀏覽器變小了，它們水平裝不下了，就會進入下一行，直到有足夠的空間，因爲無法容納水平排列的多個浮動元素。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”。這很像玩固定的積木在一個框框裏按住他往左移動。（水平移動的俄羅斯方塊）

行框，如果是不浮動的框，那麼文字是不包圍圖片的，在圖片的下面另起一行就是了，因此圖片右邊可能出現一片空白。如果是浮動的框，就會把這片空白給填補上來，那麼這意味着浮動框旁邊的行框是被縮短了的，因爲它給浮動框留出了空間。行框圍繞浮動框。這裏浮動框也不在文檔的普通流之中，但不會產生覆蓋，因爲它成爲了一個新的塊級元素，與父親元素之內的別的子元素框互動。那麼問題來了，如果要阻止行框圍繞浮動框，要那一片空白該怎麼辦？

clear 屬性規定元素的哪一側不允許其他浮動元素。默認值是none，允許這樣做。其他可能的值爲left，right，both表示不允許哪邊的浮動元素存在。

img
  {
  float:left;
  clear:both;
  }

上面的表示如果有兩個小圖片都向左浮動，一般的話就可以在同一行顯示了，除非頁面特別小了，但是上面clear屬性說明了不允許別的浮動框在同一行，所以他們就變成了兩行了。那麼問題就可以解決了，我們用clear屬性，把文字段也設置成爲浮動元素，那麼它們就不會出現圍繞現象了。還可以有別的選擇，比如兩個向左浮動的元素，這樣下面就會有一大片空白。挺好用。
上面會出現一個問題，就是如果在一個父元素中的所有孩子元素全部都是浮動元素。因爲浮動元素脫離了文檔流，它們不佔據空間，於是，父元素就變成了一個空的元素，而且這個元素並沒有包圍浮動元素，而會出現在浮動元素的上方。如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear進行清理，但問題是沒有現有的元素可以應用清理屬性。此時我們在父元素內再添加一個空的元素，元素用清理屬性就可以了。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

如上面的代碼，在父元素框里加一個沒有內容的<div>元素框，這個元素實行清理，這就實現了父元素包圍了浮動元素。但是這需要添加多餘的代碼。常常有元素可以應用 clear，但是有時候不得不爲了進行佈局而添加無意義的標記。

另外還有另一種方法，那就是這個父元素框也是浮動框，這就可以了。但問題是下一個元素會受到這個父浮動元素的影響。在這個基礎上怎麼解決問題呢？那就是所有的佈局東西全進行浮動，然後使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助於減少和消除不必要的標記。（常用方法）

補充：

img 
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}

clip屬性可以切剪元素，這裏切剪的是矩形rect，裏面的四個參數是上，水平，垂直，下的截取長度。

img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

z-index屬性是設置優先級的，默認的z-index是0。-1是擁有更低的優先級，這樣圖片就會放在底層，看起來像是背景圖片。如果改成z-index=1，那麼圖片就會覆蓋下面的文字了。