對於css定位，今天總算是搞明白了，做一下小結。

css 中有3種基本的定位機制：普通流、浮動和絕對定位。說明：普通流中元素框的位置由元素在HTML中的位置決定，塊級框從上到下一個接一個地垂直排列，框之間的垂直距離由框的垂直外邊距計算出來。

（1）相對定位：如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點移動。如果將top設定為20畫素，那麼框將出現在原位置頂部下20畫素的地方。如果將left設定為20畫素，那麼會在元素左邊建立20畫素的空間，也就是將元素向右移動

#myBox{

  position:relative;

  left:20px;

  top:20px;

}

（2）絕對定位：相對定位實際上被看做普通流定位模型的一部分，因為元素的位置是相對於它在普通流中的位置的。與之相反，絕對定位使元素的位置與文件流無關，因此不佔據空間。絕對定位的元素的位置是相對於距離它最近的那個已定位的祖先元素確定的。如果元素沒有已定位的祖先元素，那麼它的定位是相對於初始包含塊的。根據使用者代理不同，初始包含塊可能是畫布或HTML元素。

（4）浮動模型：浮動的框可以左右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊緣。因為浮動框不在文件的普通流中，所以文件的普通流中的塊框表現的就像浮動框不存在一樣。

行框和清理

         如果浮動的元素後面有一個文件流中的元素，那麼這個元素的框會表現得像浮動根本不存在一樣，但是，框的文字內容會受浮動元素的影響。會移動以留出空間。要想阻止行框圍繞在浮動框的外邊，需要對包含這些框的元素應用clear屬性。clear屬性的值可以是left、right、both或none，它表示框的哪些邊不應該挨著浮動框。

      我們來看更詳細的看看浮動和清理。假設有一個圖片，你希望它浮動到一個文字的左邊。你想將這個圖片和文字包含在另一個具有背景顏色和邊框的元素中。你可能會編寫下面這樣的程式碼：

.news{

     background-color:gray;

    border:solid 1px black;

}

.new img{

   float:left;

}

.new p{

  float:right;

}

.clear {

  clear:both;

}

<div>

   <img src="/img/pic.jpg" alt="my pic"/>

  <p>some text</p>

 <br class="clear"/>

</div>

         但是，因為浮動元素脫離了文件流，所以包圍圖片和文字的div不佔據空間。如何讓包圍元素在視覺上包圍浮動的元素呢？

方法一：需要在這個元素中的某個地方新增應用clear。可惜這個示例中沒有現有的元素的可以清理，所以需要在最後一個段落下面新增一個空元素並且清理它。

方法二：不對浮動的文字和影象進行清理，而是選擇浮動div容器。但是下一個元素會受到這個浮動元素的影響。

.news{

     background-color:gray;

    border:solid 1px black;

    float:left;

}

.new img{

   float:left;

}

.new p{

  float:right;

}

<div>

   <img src="/img/pic.jpg" alt="my pic"/>

  <p>some text</p>

 <br class="clear"/>

</div>

.news{

     background-color:gray;

    border:solid 1px black;

    overflow：hidden；

}

.new img{

   float:left;

}

.new p{

  float:right;

}

<div>

   <img src="/img/pic.jpg" alt="my pic"/>

  <p>some text</p>

 <br class="clear"/>

</div>