CSS的定位和浮動

標籤：

#CSS定位、浮動
##1、
標準文檔流：指的是在不使用定位或者其他排版或者CSS，各個元素排列的規則實際上就是CSS規定網頁預設的相片順序。
負邊距：會使文檔流發生位移，但是不會脫離文檔流，不會佔據原來的空間。
##2、相對定位：
    position:relative
    1、設定了相對定位後不會影響這個元素本身
    2、不會脫離文檔流
    3、它原本所佔的空間仍被保留
    4、如果沒有設定相對定位位移量，不會影響這個元素本身。
    div{
    position:relative;設定了div可以相對位移
    left:100px;
    top:100px;
        }設定div相對於body移動
##3、絕對位置：
    設定：position:absolute
    1、會讓元素脫離文檔流，以文檔作為父類，如果找到了定位父級，會以定位父級作為父類
    2、設定了絕對位置了之後，行級元素也支援設定高寬，即預設加上了一個display:inline-block
    3、設定絕對位置之後，這個元素就相當於飄起來了，這個時候對它位移，是相對於body位移。
       它也不會受它的父類的控制了。    
    4、後飄的會蓋在先飄的上面，比如先飄了div1，再飄div2，這個時候div2會在最上面
    5、層級優先數：z-index：數字。數字越大就越優先顯示。
###4、固定定位：
    position：fixed。
    固定定位也脫離了流，不受流量控制。
    它也可以位移，left、top、right、bottom
###5、浮動
    float:right left none(預設的，不浮動)
    浮動會脫離文檔流，且不佔據原來的位置，相當於飄起來了。
        按照一個方向移動直到碰到前一個元素的邊界或者父元素的邊界就停止下來。
            行級元素設定浮動後會預設加上dispaly:inline-block,即預設會把這個元素變成行內區塊層級元素，
            也就是說它會有高寬屬性。
        前面的元素設定了浮動，後面的元素不想跟著浮動。解決方案：在兩部分中間加一個空的div1
        利用這個div1清除浮動。清除左、右浮動：clear：left clear:right   都清除：clear：both

CSS的定位和浮動