浮動、清除浮動、BFC

一. 浮動

1. 浮動的定義

使元素脫離文檔流，按照向左或向右的方向移動，直到它的外邊緣碰到包含它的框或另外一個浮動框爲止。

脫離文檔流就是在頁面中不佔位置了。

左浮動右浮動此處就再也不贅述了。

2. 看一下浮動的一些狀況

(1). 只給第二個p浮動時，3不見了，他其實在2的下面，我給3一個寬一點的寬度。會發現3在2的下面。

(2). 給3一個浮動

他會沒有什麼變化，由於浮動只會影響他後面的元素，若是上面的元素不浮動，他也不會上去的

(3). 把外邊框的div寬度變小，會致使沒法容納全部的浮動元素，

（4）卡住的狀況

以換行的那個元素爲基準，若是有浮動元素的高度大於換行的那個元素，那麼當換行元素換行時會被高的那個元素「卡住」。

(5) 浮動對文字的影響 ,浮動框只會佔據本身的位置，使文字能夠圍繞浮動框顯示

一--. 浮動後的特性

1. 塊級元素能夠橫排顯示

2. 行內元素能夠設置寬高

3. 元素沒有設置寬高時，寬度爲內容撐開寬

4. 支持margin

5. 脫離文檔流

6.  不支持margin：auto。。。（浮動、絕對定位、固定定位的盒子失效。相對定位有效，可是若是left值不爲0，在水平方向上不會居中，由於誤差了一個left值。）

二. 清除浮動

爲啥要清楚浮動呢

當不給外層div高度時：

會變成：

 

 咱們會發現子元素浮動會形成父級盒子高度坍塌，這樣若是下面在進行繼續佈局的話會使頁面佈局錯亂，(下圖中黃色的盒子是nav下的div)若是想要繼續佈局就要清除浮動了，這裏我介紹幾種清除浮動的方法。

清除浮動的方法

1. 父級的緊鄰兄弟

給nav一個.nav{clear:both}

缺點：只是讓後面的元素正常顯示，並無撐開box的高度

2. 父級給高度

box給高度

缺點：通常都是元素內容撐開高度，拓展性很差

3. 父級元素 display：inline-block；

缺點：父級盒子margin：auto；失效，上部分和下面黃色中間有間隙，換行，致使了這個間隔的出現(緣由：http://www.javashuo.com/article/p-cxmpawnv-cz.html)。

4. 父級：overflow：hidden；

• 優勢：簡單，代碼少，瀏覽器支持好
• 缺點：不能和position配合使用，由於超出的尺寸的會被隱藏
• 建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用

5. 子元素：給浮動元素的末尾加一個元素，加上clear：both；

原理：這個空的div能讓父級獲取到高度，是由於設置以後這個div的左右都不能有浮動元素，因此這個空的div元素會向下移動，直到換行，而爲了讓這個div可以換行，父元素至少要包含浮動元素的高度才能提升足夠的空間，這樣實現清除浮動的影響。

缺點：隨意添加一個空元素，不符合代碼規範。

6. 當今最主流的清除浮動的方法：after僞元素清除浮動,添加給box。

clearfix:after{content:」」; display:block; clear:both;}

 

• 兼容問題，ie6,ie7中要加上zoom。

  .clearfix{zoom:1}

• 優勢：瀏覽器支持好，不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
• 缺點：要兩句代碼結合使用，才能讓主流瀏覽器都支持
• 建議：推薦使用，建議定義公共類，以減小CSS代碼

clearfix:after{
content:"";//設置內容爲空
height:0;//高度爲0
lineheight:
0;//行高爲0
display:block;//將文本轉爲塊級元素
visibility:hidden;//將元素隱藏
clear:both//清除浮動
}
.clearfix{
zoom:1;爲了兼容IE
}

三. BFC

BFC（Block Formatting Context），塊級格式化上下文，它規定了內部的塊級元素的佈局方式，默認狀況下只有根元素（即body）一個塊級上下文。

1. BFC特性：

(1) .內部的塊級元素會在垂直方向，一個接一個地放置

每一個元素的margin box的左邊，與包含border box的左邊相接觸（對於從左往右的格式化，不然相反）。即便存在浮動也是如此；

(3) .計算BFC的高度時，浮動元素也參與計算

(4). BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素；外面的元素也不會影響到容器裏面的子元素；

(5)、BFC會阻止外邊距疊加：通常狀況，兩個相鄰的塊級框，它們之間的垂直方向的外邊距會發生疊加。 若是這兩個相鄰的塊框不屬於同一個BFC就不會疊加！
(6)、一個BFC的邊框不能和它裏面的元素的margin重疊。這意味着瀏覽器將會給BFC建立隱式的外邊距來阻止它和浮動元素的外邊距的疊加。當給一個挨着浮動的BFC添加負得外邊距不會起做用。

2. 觸發條件：

• float除了none之外的值
• overflow除了visible以外的值
• display(table-cell / table-caption / inline-block / flex / inline-flex)
• position(absolute,fixed)

3. 爲何"overflow:hidden"能清除浮動的影響。

overflow 屬性規定當內容溢出元素框時發生的事情，

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

BFC能夠包含浮動這一特性來清除浮動

當給.parent設置"overflow:hidden"時，實際上建立了一個超級屬性BFC，此超級屬性反過來決定了"height:auto"是如何計算的。在「BFC佈局規則」中提到：計算BFC的高度時，浮動元素也參與計算。所以，父元素在計算其高度時，加入了浮動元素的高度，「順便」達成了清除浮動的目標，因此父元素就包裹住了子元素。

除了給.parent設置"overflow:hidden"，咱們還能夠設置"display:inline-block"、"position:absolute"、"float:left"等方式來建立一個BFC，從而達到包裹浮動子元素的效果（具體使用哪一種方法要看項目需求）：

// css
.parent{
  /* 具體使用哪一個要看界面設計的狀況 */
  /* overflow: hidden; */
  /* display:inline-block; */
  /* position:absolute; */
  float:left;
}