關於css float 屬性以及position:absolute 的區別。

1.float 屬性定義元素在哪一個方向浮動。以往這個屬性總應用於圖像，使文本圍繞在圖像周圍，不過在 CSS 中，任何元素均可以浮動。浮動元素會生成一個塊級框，而不論它自己是何種元素。div一個典型的塊級元素，會單獨佔據一行。

先看看最基本的塊級元素如何排列的。html代碼，如下樣式都是基於此。

<div class="boxBg">
        <div class="box1">
        框框1
        </div>
        <div class="box2">
        框框2
        </div>
        <div class="box3">
        框框3
        </div>
</div>

css代碼：

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green
    }

執行結果：

因爲div是塊級元素，因此框會以縱向形式排列。在實際操做中每每須要將框橫向排列。有兩種方式能夠實現。第一種將display:inlin-block;

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red;
    display:inline-block
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    display:inline-block
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green;
    display:inline-block
    }

執行結果：

至於中間的縫隙，追溯到本質緣由是元素之間的空白符引發的，因此在父元素設置fone-size的大小，能夠調節空白縫隙的大小。

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    font-size:34px;
}

將font-size:34px以後，那麼縫隙會變寬。

執行結果：

同理，要去掉縫隙，那麼須要將font-size:0;

.boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    font-size:0
}

執行結果：

如此便實現了想要的佈局，框裏邊的文字也跟着消失了，一樣也證實文字的大小影響縫隙。只須要在子元素裏從新設置就能夠了。固然今天的重點並非這個。一樣的效果float:left;也能夠輕鬆實現。

<style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:50px;
    background-color:red;
    float:left
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    float:left
    }
    .box3{
    width:100px;
    height:50px;
    background-color:green;
    float:left
    }
</style>

執行結果：

元素添加 float以後，此浮動元素會在其碰到父級元素邊框或者另外一個浮動元素邊框，緊鄰其後顯示。例以下邊的例子，在浮動元素總寬度大於父級元素時，換行，換行的時候遇到前一個float並在其後顯示

 

    <style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:100px;
    background-color:red;
    float:left
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    float:left
    }
    .box3{
    width:400px;
    height:50px;
    background-color:green;
    float:left
    }
</style>

執行結果：

若是使用inline-block,結果會是怎樣呢？

  <style>
    .boxBg{
    margin: 0 auto;
    width:500px;
    height:200px;
    border:2px solid #ccc;
    }
    .box1{
    width:100px;
    height:100px;
    background-color:red;
    display:inline-block
    }
    .box2{
    width:100px;
    height:50px;
    background-color:blue;
    display:inline-block
    }
    .box3{
    width:400px;
    height:50px;
    background-color:green;
    display:inline-block
    }
</style>

執行結果：

此時框3是另起一行而不是跟在框1以後，(1,2之間的縫隙這裏就不說了) 這也是一個使用inline-block和float的判斷，若是模塊寬度不同使用float排版可能會致使跟預想結果不同，因此在寬高不變的狀況下使用float是極好的，若是不一致的話須要看具體的佈局，使用恰當的屬性。

如下貼代碼，只貼修改的部分，其餘不變，結構不變。

若是去掉box3的float：left會是什麼結果？按照理解，浮動元素不佔據空間，也就是框框3會無視框框1，框框2直接緊鄰父元素的邊框顯示，也就是框框1會蓋住框框3?那結果呢？

.box3{
    width:100px;
    height:50px;
    background-color:green;
}

執行結果：

爲什麼框3的文字會出如今下邊而不是被框1覆蓋？接着看代碼，看圖

.box3{
    height:50px;
    background-color:green;
}

執行結果：

看出不同了沒？是的。box3沒有定義width;去掉了width,不定義寬度的狀況下默認寬度就是父元素的寬度，也就是說此時width:500px;浮動元素覆蓋非浮動元素，也就是框3前邊200px的寬度被浮動元素覆蓋了，之因此文字沒有被覆蓋並且文字被浮動元素擠在200px以後的位置，緣由呢？

 

浮動元素不會佔據塊的空間，因此框三就是100%的父容器寬度 500px，可是浮動元素會佔據另外的空間，也就是行框空間，通俗的講就是文本所佔的空間。

 

這也是圖片float以後，文本會自動環繞圖片的緣由。浮動元素不佔據塊級空間，但會影響塊級元素以內的文字以及內聯元素。

如此的話若是想要三個框寬度同樣，那麼只須要將框三width:300px;

.box3{
    width:300px;
    height:50px;
    background-color:green;
}

執行結果：

 到這裏基本的浮動說完了，那就要說說問題了，浮動雖然好用，可是也會在實際中出現不少問題。例如：

  <style>
    .boxBg{
    margin: 0 auto;
    position:relative;
    width:500px;
    border:2px solid #ccc;
    background-color:#ccd;
    }
    .box1{
    float:left;
    width:100px;
    height:50px;
    background-color:red;
    }
    .box2{
    float:left;
    width:100px;
    height:50px;
    background-color:blue;
    }
    .box3{
    float:left;
    width:100px;
    height:50px;
    background-color:green;
    }
</style>

執行結果：

很常見的問題，正常狀況下。應該灰色的背景會跟框同樣高，可事實老是不會盡如人意 :)

這種狀況產生的緣由，都知道是由於浮動形成的，是的，是浮動，不少地方有說浮動元素會脫離普通流，因此普通元素能夠當浮動元素不存在，因此這裏就不會撐開背景了，可是認真看的同窗，必定會記得上邊有提到浮動元素不會影響塊框，可是會影響行框，也就是文字或內聯元素，不論是塊級元素仍是內聯元素都屬於普通流，若是浮動元素脫離普通流又爲什麼會影響行框？其實我以爲沒必要要糾結於這些概念性的東西。按照個人理解浮動元素就是跟塊級元素不在一個水平空間，跟文字內聯元素在一個空間，因此這裏邊框就至關於在背景之上，因此不會影響背景元素，日常所說的清除浮動，並非說把浮動元素的float屬性去掉，而是清除其周圍的浮動元素，使其自身周圍沒有浮動元素，因此若是想讓框三到第二行，不能在框2裏邊用clear:right;而是須要在框3裏邊使用clear:left;

.box3{
    float:left;
    width:100px;
    height:50px;
    background-color:green;
    clear:left
    }

執行結果：

ok!理解了這個，下來再說說如何使背景和框等高，第一種：最直接的辦法就是直接設置背景高度和框相等就Ok了，固然這個不是重點，下面來講說清除浮動。首先先看看例子：

<!DOCtype>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <style>
    .boxBg{
    margin: 0 auto;
    position:relative;
    width:500px;
    border:2px solid #ccc;
    background-color:#ccd;
    }
    .box1{
    float:left;
    width:100px;
    height:50px;
    background-color:red;
    }
    .box2{
    float:left;
    width:100px;
    height:50px;
    background-color:blue;
    }
    .box3{
    float:left;
    width:100px;
    height:50px;
    background-color:green;
    }
    .clear{
    width:100px;
    height:50px;
    }
</style>
</head>
<body>
    <div class="boxBg">
        <div class="box1">
        框框1
        </div>
        <div class="box2">
        框框2
        </div>
        <div class="box3">
        框框3
        </div>
        <div class="clear"></div>
    </div>
</body>
</html>

執行結果：

以上結果實現告終果，很明顯是直接添加了一個高度相等的空元素，由於此元素沒有浮動，因此是跟背景同樣，所以背景被撐開了。實際上是用清除浮動的原理跟這個是同樣的，也是想辦法撐開背景；以上去掉clear的寬，高，加上clear屬性

.clear{
    clear:left;
    }

執行結果：

這個可能還看不清楚，給clear框裏邊加幾個字試試看

執行結果：

由於clear用了clear:left綜上所述，clear左邊不能有浮動元素，因此它必須另起一行顯示。如此便看到圖上的結果，其實仍是用一個元素撐開的背景。固然還有其餘方法實現，這裏主要是講清楚浮動就行了:)

float和position:absolute的區別

文章前半部分都在講述float，相對於float而言，position:absolute是徹底脫離文檔流的，它不會佔據普通流的空i間，普通流的佈局徹底不受絕對定位的影響。先看個例子：

<style>
        .boxBg{
        margin: 0 auto;
        width:500px;
        height:200px;
        border:2px solid #ccc;
        
        }
        .box1{
        width:100px;
        height:50px;
        background-color:red;
        position:absolute;
        left:150px;
        top:10px;
        }
        .box2{
        width:100px;
        height:50px;
        background-color:blue;
        float:left;
        }
        .box3{
        width:100px;
        height:50px;
        background-color:green;
        position:absolute;
        }
 </style>

執行結果：

由於box使用absolute，因其父元素未設置Position因此它的位置是相對於瀏覽器。box2因其是float因此被box3覆蓋。box3由於未設置left.top值，因此未激活absolute位置上不會發生變化。看下邊的例子。使用z-index屬性，設置box3,

.box3{
        width:100px;
        height:50px;
        background-color:green;
        position:absolute;
        z-index:-1
        }

執行結果：

框2顯示出來，框3被覆蓋掉了，其實能夠這樣理解，假設正常流是一個水平面，值爲0，浮動元素在這個水平線上，而絕對定位的元素若是z-index小於0就會在水平線一下，因此就被浮動元素遮擋住了，大於0就是在水平線之上，遮蓋浮動元素，若是等於0由於絕對定位脫離正常文檔流，因此會相對於水平線高出。仍然會遮蓋浮動元素。

此文結束。新手學習，不足請指教。