css 清除浮動 定位 z-index屬性

當一個父元素包含多個浮動的子元素的時候，子元素的浮動確定了他們的位置，但是子元素不會影響父元素的寬度，使父元素塌陷，從而使父元素高度為0，這個時候可以為父元素清除浮動，從而阻止父元素塌陷。

1.overflow方法

對父元素設置overflow：hidden；

但是overflow清除浮動會有一些缺點。

2.clearfix方法

清除浮動更好的方法是clearfix

“clearfix”技巧是基於在父元素上使用“:before”和“:after”兩個偽類。使用這些偽類，我們可以在浮動元素的父容器前面和后面創建隱藏元素。“:before”偽類是用來防止子元素頂部的外邊距塌陷，使用“display: table”創建一個匿名的“table-cell”元素。這也確保在IE6和IE7下具有一致性。“:after”偽類是用來防止子元素的底部的外邊距塌陷，以及用來清除元素的浮動。

在IE6和7的瀏覽器中，加上“*zoom”屬性來觸發父元素的hasLayout的機制。決定了元素怎樣渲染內容，以及元素與元素之間的相互影響。

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

但是每次都為父元素設置太麻煩，可以單獨設置一個類用來清除浮動，當有父元素需要清除浮動的時候把這個類加給父元素就可以

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

<div class='parent','clearfloat'>

</div>

 值得注意的是，目前每個元素只有一個“:before”和“:after”偽類。當你嘗試使用其他的“:before”和“:after”的clearfix技巧，你的內容可能無法達到想要的效果。

 

position有4個屬性 static relative absolute fixed

元素都有position屬性，默認值為static，意為靜止的，指他們不接受位置屬性設置（top bottom left right）

position:relative;

相對定位，相對於元素開始的位置，使用位置屬性設置，需要注意的是，使用相對定位的元素原位置扔占據這正常的文檔流，別的元素無法占據相對定位元素原來的位置。

position:absolute;

絕對定位，絕對定位的位置和父元素有關系，絕對定位要求祖先元素至少有一個不是static定位。否則就相對於body進行定位。使用位置屬性相對於其祖先元素進行定位，需要注意的是絕對定位的元素會脫離原來的文檔流，原來的位置可以被其他元素占據。

position:fixed;

固定定位，相對於瀏覽器窗口進行定位。元素會脫離原來的文檔流。ie6不支持fixed屬性。

 

z-index屬性可以改變元素的層疊屬性。給元素設置z-index屬性要求元素的position屬性至少是relative absolute fixed中的一種。

.box1{
    z-index:3;  
}
.box2{
    z-index:2;
}
.box3{
    z-index:1
}

第一個盒子在第二個和第三個上面，第二個盒子在第一個上面