CSS浮動並清除浮動(形成的影響)

1、浮動

CSS浮動    CSS float浮動的深刻研究、詳解及拓展(一)    CSS浮動屬性Float詳解

塊級元素獨佔一行

塊級元素，在頁面中獨佔一行，自上而下排列，也就是傳說中的流。

能夠看出，即便div1的寬度很小，頁面中一行能夠容下div1和div2，div2也不會排在div1後邊，由於div元素是獨佔一行的。

注意，以上這些理論，是指標準流中的div。不管多麼複雜的佈局，其基本出發點均是：「如何在一行顯示多個div元素」。

浮動

浮動：浮動的框能夠左右移動，直至它的外邊緣遇到包含框或者另外一個浮動框的邊緣。

浮動框不屬於文檔中的普通流，當一個元素浮動以後，不會影響到塊級框的佈局而只會影響內聯框（一般是文本）的排列，文檔中的普通流就會表現得和浮動框不存在同樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（「高度塌陷」現象）。顧名思義，就是漂浮於普通流之上，像浮雲同樣，可是隻能左右浮動。

顯然標準流已經沒法知足需求，這就要用到浮動。 浮動能夠理解爲讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。

重要結論：

假如某個div元素A是浮動的，若是A元素上一個元素也是浮動的，那麼A元素會跟隨在上一個元素的後邊(若是一行放不下這兩個元素，那麼A元素會被擠到下一行)；若是A元素上一個元素是標準流中的元素，那麼A的相對垂直位置不會改變(由於標準流中的塊級元素是獨佔一行的)，也就是說A的頂部老是和上一個元素的底部對齊。

能夠看出：

元素浮動以前，也就是在標準流中，是豎向排列的，而浮動以後能夠理解爲橫向排列。

2、清除浮動（形成的影響）

清除浮動能夠理解爲打破橫向排列。

清除浮動其實就一個目的，就是解決高度塌陷的問題。

爲何會高度塌陷？何時會高度塌陷？塌陷緣由是：元素含有浮動屬性 – 破壞inline box – 破壞line box高度 – 沒有高度 – 塌陷。

何時會塌陷：當標籤裏面的元素沒有實際高度時會塌陷。

清除浮動：

3.1    添加額外標籤

浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」></div>，其餘標籤br等亦可。

3.2    使用 br標籤和其自身的 html屬性

<br clear="all" />

3.3   父元素設置 overflow：hidden

 經過設置父元素overflow值設置爲hidden(在支持BFC的瀏覽器觸發BFC)；在IE6,IE7中還須要觸發 hasLayout ，例如 zoom：1

3.4   父元素設置 overflow：auto 屬性

　父元素設置 overflow：auto 屬性(在支持BFC的瀏覽器觸發BFC)　一樣IE6,IE7須要觸發hasLayout，

3.5  父元素也設置浮動

3.6  父元素設置display:table

3.7  使用 :after 僞元素

清除浮動兩大類方法：

經過對比，咱們不難發現，其實以上列舉的方法，無非有兩類：

其一，經過在浮動元素的末尾添加一個空元素，設置 clear：both屬性，after僞元素其實也是經過 content 在元素的後面生成了內容爲一個點的塊級元素；

其二，觸發BFC或haslayout：經過設置父元素 overflow 或者display：table 屬性來閉合浮動，咱們來探討一下這裏面的原理。（即觸發BFC或haslayout）

after僞元素 清除浮動重點講解

1 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
2 .clearfix { *zoom:1; }

1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;

2) height:0 避免生成內容破壞原有佈局的高度。

3) visibility:hidden 使生成的內容不可見，並容許可能被生成內容蓋住的內容能夠進行點擊和交互;

4）經過 content:"."生成內容做爲最後一個元素，至於content裏面是點仍是其餘都是能夠的，例如oocss裏面就有經典的content:"XXXXXXXXX",有些版本可能content 裏面內容爲空,一絲冰涼是不推薦這樣作的,firefox直到7.0 content:」" 仍然會產生額外的空隙；

5）zoom：1 觸發IE hasLayout。

經過分析發現，除了clear：both用來閉合浮動的，其餘代碼無非都是爲了隱藏掉content生成的內容，這也就是其餘版本的閉合浮動爲何會有font-size：0，line-height：0。

精益求精方案一：

1 .clearfix:after {content:"\200B"; display:block; height:0; clear:both; }
2 .clearfix { *zoom:1; /* IE6 IE7 觸發hasLayout*/}.

相對於空標籤閉合浮動的方法代碼彷佛仍是有些冗餘，經過查詢發現Unicode字符裏有一個「零寬度空格」，也就是U+200B ，這個字符自己是不可見的，因此咱們徹底能夠省略掉 visibility:hidden了

精益求精方案二：

1 /* For modern browsers */
2 .cf:before,.cf:after {
3 content:"";
4 display:table;
5 }
6 .cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */
7 .cf { zoom:1; }

上面的方法用到了 :before 僞元素，不少人對這個有些迷惑，到底我何時須要用 before 呢？爲何方案一沒有呢？其實它是用來處理 margin 邊距重疊的，因爲內部元素 float 建立了BFC，致使內部元素的margin-top和 上一個盒子的 margin-bottom 發生疊加。若是這不是你所但願的，那麼就能夠加上 before，若是隻是單純的閉合浮動，after 就夠了！