浮動(clear)

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

 

從各個方面比較，after僞元素閉合浮動無疑是相對比較好的解決方案了，下面詳細說說該方法：

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

.clearfix { *zoom:1; }

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

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

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

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

5）zoom：1 觸發IE hasLayout。

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

 

精益求精方案一：

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

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }

.clearfix { *zoom:1; }.

精益求精方案二：

由Nicolas Gallagher 大溼提出來的,原文:A new micro clearfix hack，該方法也不存在firefox中空隙的問題。

/* For modern browsers */

.cf:before,.cf:after {

content:"";

display:table;

}

.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */

.cf { zoom:1; }

 須要注意的是：

上面的方法用到了  ：before僞元素，不少人對這個有些迷惑，到底我何時須要用before呢？爲何方案一沒有呢？其實它是用來處理margin邊距重疊的，因爲內部元素 float 建立了BFC，致使內部元素的margin-top和 上一個盒子的margin-bottom 發生疊加。若是這不是你所但願的，那麼就能夠加上before，若是隻是單純的閉合浮動，after就夠了！並非如同大漠《Clear Float》一文所說的：但只使用clearfix:after時在跨瀏覽器兼容問題會存在一個垂直邊距疊加的bug，這不是bug，是BFC應該有的特性。

 

此時此刻的我，對浮動依舊不瞭解，前端世界依舊很龐大，我要去追尋

 

 

清浮動
1.給父級也加浮動

2.給父級加display:inline-block

3.在浮動元素下加<div class="clear"></div>

.clear{ height:0px;font-size:0;clear:both;

 

4.在浮動元素下加<br clear="all"/>

5. 給浮動元素的父級加{zoom:1;}
:after{content:""; display:block;clear:both;}

6.Overflow:auto 溢出顯示滾動條，也是具備浮動效果，對浮動元素父級添加；

**在IE6，7下浮動元素的父級有寬度就不用清浮動

haslayout 根據元素內容的大小 或者父級的父級的大小來從新的計算元素的寬高

display: inline-block
height: (任何值除了auto)
float: (left 或 right)
width: (任何值除了auto)
zoom: (除 normal 外任意值)

 

clear屬性只能在塊級元素中添加，在內聯元素中沒有用;