關於CSS中的float和position (父容器div內的子項目div為float時，父元素無法撐開（或高度自適應）的解決方式)__div

當構建頁面排版時，有不同的方法可以使用。使用哪一種方法取決於具體頁面的排版要求，在不同的情況下，某些方法可能好過於其他的方法。

比如，可以使用若干個浮動元素來構建一個整潔簡潔的頁面排版。或者，如果需要更複雜的排版要求，可以考略使用其他方法，比如使用相對定位和絕對位置。

在這篇文章中，我們首先要討論元素浮動；然後，我們要討論如何使用x,y和z軸控制元素的位置。

 

元素浮動

當構建一個頁面的排版時，使用元素浮動是一種直觀的方法去控制元素的位置。元素浮動可以讓一個元素靠近或者遠離另一個元素。它根據一個元素的大小和其父節點容器的大小來構造這個元素在排版中與其他元素之間的關係。

當一個元素被浮動時，這個元素是挨著前一個元素，還是出現在新的一行。這取決於它相鄰元素的位置。

當然，元素浮動在提供強大威力的同時，也帶來了很多問題。一個著名的問題就是，當一個父節點包括了若干浮動的子項目時，父節點的排版會考慮到浮動子項目的大小和位置，但是子項目並不會影響父節點的大小。在這種情況下，父節點的height變成了0，並且忽略其他屬性。 很多時候，這個問題沒有被注意到，特別是當父節點沒有附合任何的CSS樣式，而且嵌套的元素也看上去被正確地排列了。

如果沒有正確地排列嵌套元素，那麼可能引發排版上的錯誤。請參閱下面的這個例子， 類名為.box-set的DIV容器應該有淺灰色的背景，但是因為其嵌套元素都是浮動元素，所以原本期望的背景色沒有出現。如果你查看.box-set的盒模型，你會發現它的height值為0。

<div class="box-set">  <div class="box">Box 1</div>  <div class="box">Box 2</div>  <div class="box">Box 3</div></div>

.box-set {  background: #e8eae9;}.box {  background: #8ec63f;  height: 100px;  float: left;  margin: 10px;  width: 200px;}

一個解決方案是在父容器閉合標籤前加上一個空元素，並且設定它的clear : both。“清除浮動元素”這一招可以解決大多數情況，但是它並不是“語義正確”的。隨著頁面上需要清除的浮動元素 的數量增加，需要的空節點的數量也隨之增加，但是這些空節點並沒有任何的HTML語義。

幸運的是，有一些其他技巧同樣使用，最著名的就是使用overflow和clearfix的技巧。

 

使用overflow

在父容器上設定 overflow:auto 可以讓它自動包含子項目，從而具有了實際的height值，這樣上例中的灰色背景將得到顯示。

在IE6中使用這一招時需要給父節點容器設定height或者width屬性。因為實際情況中height常常是可變的，所以是設定width的值。對於蘋果平台上的IE，設定overflow:auto將會給容器增加捲軸，所以最好是設定 overflow : hidden 。

.box-set {  background: #404853;  overflow: auto;}

這一招有些副作用。例如，需要增加樣式或者移動子項目超出了父容器的範圍時，比如實現邊框陰影或者加上一個下拉式功能表。在下面的例子中你將看到，當邊框陰影超出父容器的範圍時就會被遮蓋了，同時第二個子項目排列有問題。

 

使用clearfix

clearfix通常搭配 :before 或者 :after 虛擬元素使用。使用虛擬元素就是在包含浮動元素的父容器的前面或者後面創造一個隱藏的元素。通過對 :before 虛擬元素使用 display:table 來建立一個匿名的table-cell元素，從而防止子項目的top margin消失。這一招在IE6和7中具有一致的效果。同樣的，通過設定 :after 虛擬元素來防止子項目的bottom margin消失。

另外，需要對父容器使用 *zoom 屬性觸發hasLayout機制來解決IE6和7的一致性。hasLayout機制決定了元素應該怎樣渲染和框住它的內容，以及元素間的位置關係。

在下面使用clearfix的例子中，你將看到元素就算超出了父容器也可以顯示了。（注意邊框陰影）

.box-set:before,.box-set:after {  content: "";  display: table;}.box-set:after {  clear: both;}.box-set {  *zoom: 1;}

 

有效地包含浮動元素

具體使用哪一個技巧取決於你的個人習慣。有些人傾向於使用clearfix技巧，因為它在跨瀏覽器上的一致性更好。另一些人覺得clearfix需要更多的代碼。因此，選擇哪個技巧不重要，重要的是注釋註明和寫進文檔。

一個常見的實現就是給所有需要包含浮動元素的父容器一個統一的類名，方便管理樣式。比如使用下列代碼，這樣只需給需要包含浮動元素的父節點加上 group的類名即可。

.group:before,.group:after {  content: "";  display: table;}.group:after {  clear: both;}.group {  *zoom: 1;}

 

Position屬性

有些情況下，你需要更多的對元素位置的控制，這時候就需要使用position屬性了。position屬性一共有五種不同的取值。

 

Position Static

這是position屬性的預設取值，意味著這個元素沒有也不接受任何對於該元素的位置位移量屬性。

在下列的例子中，所有的盒子都將一個接一個的堆起來。因為它們都是區塊層級元素，並且沒有被浮動。

<div class="box-set">  <div class="box box-1">Box 1</div>  <div class="box box-2">Box 2</div>  <div class="box box-3">Box 3</div>  <div class="box box-4">Box 4</div></div>

.box-set {  background: #e8eae9;}