css浮動與清除浮動

css浮動

　　首先，咱們要知道，css中塊級元素在頁面中是獨佔一行的，自上而下排列，也就是咱們所說的流，一般稱爲標準流。

　　以div爲例，div是塊級元素，以下：

　　能夠清楚地看到，div是獨佔一行的，div2和div3 是不會排在div1的後面，這是在標準流中的理論，可是，有些時候，咱們的需求不單單是這樣，咱們須要在一行內顯示多個div元素，因此，標準流已經不能知足咱們的需求。這個時候就用到浮動。

　　浮動的框能夠左右移動，直至它的外邊緣碰到包含框或另外一個浮動框的外邊緣。浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到塊級元素的佈局，而只會影響到內聯元素（一般是文本）的排列，文檔中的普通流就表現得如同浮動框不存在同樣。當浮動框高度超出包含框的時候，就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。

　　仍是舉例說明，如今給div2一個向左的浮動，出現如下結果：

　　如圖，div3不見了？其實並不是不見，而是div3跑到了div2的下面。由於咱們給了div2向左浮動，div2已經脫離了標準流，因此div3就會頂上去跑到div2的下面，就是咱們看到的效果。

若是咱們給div2和div3都加上左浮動，效果是什麼呢？

如今能夠看到，div2和div3都已經脫離了標準流。此時div3發現div2也是浮動的，因此div3就會出如今div2以後。而div2發現上邊的元素div1是標準流中元素，所以div2的相對垂直位置不會改變，頂部仍然和div1元素的底部對齊。因爲是左浮動，左邊的div2在最左邊。

同理，若是div2和div3都設置爲右浮動的話，效果以下：

再舉一個例子：

如今我有四個div，如今他們分別沒有浮動，都在標準流裏，每一個div獨佔一行，如今我給div2和div4分別加一個左浮動，而後給div3增長50px的寬度，便於理解，來看看效果：

如今咱們能夠很好的理解上面的效果了，div2和div4都是左浮動的，先來理解div2 ，div2因爲有左浮動，脫離了標準流，它發現div1是標準流裏的元素，所了垂直位置不變，而後，div3發現div2是浮動的，它和我不在一個流中了，因此它的位置就空了，因此div3就頂了上去，如今來理解div4，div4也是向左浮動的，首先它看到div3向上頂了上去，因此div4也就跟着頂上，然而它是浮動的，可是它發現div3是標準流中的元素，因此它的垂直位置也不會有變化，若是沒有div3的話，它的位置會緊跟div2的後面向左浮動的。

若是三個框都向左浮動，那麼div1向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

若是包含框太窄，沒法容納水平排列的單個浮動框，那麼其餘浮動框向下移動，直到有足夠的空間。

若是浮動元素的高度不一樣，那麼當他們向下移動時可能會被其餘元素卡住。

 

---

清除浮動

若是父元素只包含浮動元素，且父元素沒有設置高度和寬度的時候，那麼他的高度就會縮減爲零。這是由於浮動元素脫離了標準流，包含他們的父框中沒有內容了，因此出現了「高度坍塌」的問題。

解決「塌陷」有如下幾種方法：

1. 使用帶clear屬性的空元素                    在父塊中、浮動元素後用一個空元素，如<div class="clear"></div>，並在css中賦予 .clear{ clear : both }屬性便可清除浮動。也可使用<br class="clear" />或<hr class="clear" />來進行清除。給空元素設置clear後，由於它的左右兩邊不能有任何浮動元素，因此空元素下移到浮動元素的下方。而空元素又包含在父塊中，至關於把父塊撐開了，視覺上起到了父塊包含浮動元素的效果。
2. 使用CSS的overflow屬性                     給浮動元素的容器加上overflow：hidden；或者overflow：auto。在父元素上設置overflow這個屬性，父元素就會擴展包含浮動，這個方法有比較好的語義。可是要記住一點，overflow屬性不是爲了清除浮動而定義的，要當心不要覆蓋住內容或者觸發了不須要的滾動條。
3. 給浮動元素的容器添加浮動                   給浮動元素的容器添加浮動屬性便可清除浮動，可是這樣會使下一個元素受到這個浮動元素的影響，不推薦使用。
4. 使用CSS的僞元素                              

.clearfix:after{
    content:"";
    display:table;
    height:0;
    visibility:both;
    clear:both;
}

.clearfix{
*zoom:1;    /* IE/7/6*/
}

這裏把它寫成公共的樣式，只要哪裏須要清除浮動，就在哪裏添加一個清除浮動的類，好比上面的例子，我就給外面包着的div添加clearfix這個類，能夠達到和上面一樣的效果。這種方式這樣理解，就是利用僞類元素，也就是在有浮動的標籤前面添加一個塊級元素，來達到效果。