浮動float、浮動影響和清除浮動

普通流(normal flow)

這個單詞不少人翻譯爲 文檔流 ， 字面翻譯 普通流 或者標準流均可以。

前面咱們說過，網頁佈局的核心，就是用CSS來擺放盒子位置。如何把盒子擺放到合適的位置？

CSS的定位機制有3種：普通流（標準流）、浮動和定位。

html語言當中另一個至關重要的概念----------標準流！或者普通流。普通流實際上就是一個網頁內標籤元素正常從上到下，從左到右排列順序的意思，好比塊級元素會獨佔一行，行內元素會按順序依次先後排列；按照這種大前提的佈局排列之下絕對不會出現例外的狀況叫作普通流佈局。

浮動(float)

浮動最先是用來控制圖片，以便達到其餘元素（特別是文字）實現「環繞」圖片的效果。

後來，咱們發現浮動有個頗有意思的事情：就是讓任何盒子能夠一行排列,所以咱們就慢慢的偏離主題，用浮動的特性來佈局了。

什麼是浮動？

元素的浮動是指設置了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。

在CSS中，經過float屬性來定義浮動，其基本語法格式以下：

選擇器{float:屬性值;}

屬性值	描述
left	元素向左浮動
right	元素向右浮動
none	元素不浮動（默認值）

浮動詳細內幕特性

浮動首先建立包含塊的概念（包裹）。就是說， 浮動的元素老是找理它最近的父級元素對齊。可是不會超出內邊距的範圍。 

浮動的元素排列位置，跟上一個元素（塊級）有關係。若是上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；若是上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊。

由2能夠推斷出，一個父盒子裏面的子盒子，若是其中一個子級有浮動的，則其餘子級都須要浮動。這樣才能一行對齊顯示。

浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。

元素添加浮動後，元素會具備行內塊元素的特性。元素的大小徹底取決於定義的大小或者默認的內容多少

浮動根據元素書寫的位置來顯示相應的浮動。

總結： 浮動 ---> 浮漏特

浮： 加了浮動的元素盒子是浮起來的，漂浮在其餘的標準流盒子上面。 漏： 加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。 特： 特別注意，這是特殊的使用，有不少的很差處，使用要謹慎。

清除浮動

人生就像乘坐北京地鐵一號線：

途經國貿，羨慕繁華；

途經天安門，幻想權力；

途經金融街，夢想發財；

通過公主墳，遙想華麗家族；

通過玉泉路，依然雄心勃勃…

這時，有個聲音飄然入耳:乘客你好,八寶山立刻就要到了！

頓時醒悟：人生苦短，善始善終。

比如咱們的浮動，有浮動開始，則就應該有浮動結束。

爲何要清除浮動

咱們前面說過，浮動本質是用來作一些文字混排效果的，可是被咱們拿來作佈局用，則會有不少的問題出現， 可是，你不能說浮動很差 。

因爲浮動元素再也不佔用原文檔流的位置，因此它會對後面的元素排版產生影響，爲了解決這些問題，此時就須要在該元素中清除浮動。

若是浮動一開始就是一個美麗的錯誤，那麼請用正確的方法挽救它。

 

清除浮動本質

清除浮動主要爲了解決父級元素由於子級浮動引發內部高度爲0 的問題。

 

清除浮動的方法

其實本質叫作閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到裏面，讓父盒子閉合出口和入口不讓他們出來影響其餘元素。

在CSS中，clear屬性用於清除浮動，其基本語法格式以下：

選擇器{clear:屬性值;}

屬性值	描述
left	不容許左側有浮動元素（清除左側浮動的影響）
right	不容許右側有浮動元素（清除右側浮動的影響）
both	同時清除左右兩側浮動的影響

額外標籤法

是W3C推薦的作法是經過在浮動元素末尾添加一個空的標籤例如 <div style=」clear:both」></div>，或則其餘標籤br等亦可。

優勢： 通俗易懂，書寫方便

缺點： 添加許多無心義的標籤，結構化較差。 我只能說，w3c你推薦的方法我不接受，你不值得擁有。。。

父級添加overflow屬性方法

能夠經過觸發BFC的方式，能夠實現清除浮動效果。（BFC後面講解）

能夠給父級添加： overflow爲 hidden|auto|scroll 均可以實現。

優勢： 代碼簡潔

缺點： 內容增多時候容易形成不會自動換行致使內容被隱藏掉，沒法顯示須要溢出的元素。

使用after僞元素清除浮動

使用方法：

 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden; }   
​
 .clearfix {*zoom: 1;}   /* IE六、7 專有 */

優勢： 符合閉合浮動思想 結構語義化正確

缺點： 因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

表明網站： 百度、淘寶網、網易等

 

注意： content:"." 裏面儘可能跟一個小點，或者其餘，儘可能不要爲空，不然再firefox 7.0前的版本會有生成空格。

使用before和after雙僞元素清除浮動

使用方法：

.clearfix:before,.clearfix:after { 
  content:".";
  display:table;
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom:1;
}

優勢： 代碼更簡潔

缺點： 因爲IE6-7不支持:after，使用 zoom:1觸發 hasLayout。

表明網站： 小米、騰訊等