文章版權歸饑人谷_Lyndon以及饑人谷所有。

1. 浮動元素有什么特征？對父容器、其他浮動元素、普通元素、文字分別有什么影響？

特征：浮動元素的框可以向左或者向右移動，直到它的外邊緣碰到父元素包含框或者另一個浮動元素的邊框為止；浮動元素不在文檔普通流之中，因此文檔普通流中的塊級元素感知不到浮動元素的存在。
對父容器的影響：浮動元素脫離文檔流向左或者向右移動，直到邊框碰到父元素的邊緣。

1-1.png

對其他浮動元素的影響：浮動元素都向某個方向移動，直到其邊框碰到其他元素的邊框，如果包含框太窄，無法容納多個浮動元素，那么其浮動元素向下移動，直到擁有足夠的空間，如果浮動元素的高度不同，那么它們向下移動時可能被其他浮動元素卡住。

1-2.png

1-3.png

無法被一行容納的浮動元素向下移動

1-4.png

框3被框1卡住了
對普通元素的影響：沒有什么影響，普通元素感知不到浮動元素的存在。但是普通元素的文字會受到影響。

1-5.png

普通元素感知不到浮動元素的存在

1-n.png

普通元素的文字受到影響
對文字的影響：浮動元素旁邊的文字框被縮短，從而給浮動元素留出空間，文字框圍繞浮動元素。

1-6.png

若希望圍繞行框阻止浮動框，需要使用clear屬性。

1-7.png

2. 清除浮動指什么? 如何清除浮動?

清除浮動：清除浮動指的是運用clear屬性去解決浮動父容器高度塌陷的問題，clear屬性規定元素的哪一側不允許其他浮動元素。
可選擇的值有：left, right, both, none, inherit
清除浮動方法1：在最后添加一個空div，對它進行清理，缺點是增加了一個無意義標簽。

2-1.png

清除浮動方法2：BFC（Block Format Content）清理浮動，BFC可以阻止垂直外邊距折疊、不會重疊浮動元素、可以包含浮動。因此清理浮動在BFC的語境下就是“包含浮動”，也即讓父容器形成BFC就可以。

2-2.png

3. BFC 是什么？如何生成 BFC？BFC 有什么作用？

• 在了解BFC之前，需要先了解：box, formatting context的概念。

Box：CSS布局的基本單位
一個頁面由很多Box組成，元素的類型和display屬性決定這個Box的類型，不同類型的Box會參與不同的Formatting Context，Box內的元素會以不同方式進行渲染。主要的Box有以下幾種：
塊級元素 block-level box: display屬性為block, list-item, table的元素，會生成block-level box，并且參與block formatting context
行內元素 inline-level box: display屬性為inline, inline-block, inline-table的元素，會生成inline-level box，并且參與inline formatting context
run-in box，還沒有涉及到。


formatting context：W3C CSS2.1規范中的概念
它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定其子元素如何定位、和其他元素之間的關系與相互作用。常見的formatting context有BFC（Block formatting context）和IFC（Inline formatting context）。之后在CSS3中還加入了GFC和FFC。

• BFC
  BFC全稱：Block Formatting Context，中文可以翻譯為：“塊級格式化上下文”，它是一個獨立的渲染區域，只有block-level box參與，它規定內部的block-level box如何布局，并且與這個區域外部毫不相干。

• BFC布局規則

• 內部的box會在垂直方向一個接一個地放置；
• box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰box的margin會發生重疊；
• 每個元素margin box左邊，與包含塊border box的左邊相接觸（對于從左向右的格式化，否則相反），即使存在浮動也是如此；
• BFC的區域不會與float box重疊；
• BFC是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素；
• 計算BFC高度時，浮動元素也參與計算。

• 生成BFC

• 根元素
• float屬性不為none
• position為absolute或者fixed
• display為inline-block, table-cell, table-caption, flex, inline-flex
• overflow不為visible

• BFC的應用場景舉例

• 自適應兩欄布局：正常情況下布局如下

bfc-1.png

根據BFC的規則——“每個元素的margin box左邊與包含塊border box的左邊向接觸，即使存在浮動也是如此”。因此雖然存在浮動元素aside，但是main的左邊依然會與包含塊的左邊接觸。
另外，根據BFC布局規則第四條——“BFC的區域不會與float box重疊”。因此可以通過將main生成BFC，來實現自適應兩欄布局。

bfc-2.png

這一布局會根據塊的寬度、aside的寬度自動調整寬窄。

• 清除內部浮動：正常情況下布局如下

bfc-3.png

根據BFC的規則——“計算BFC的高度時，浮動元素也參與計算”。為了清除內部浮動，可以將par設置為bfc，在計算par高度時，par內部的浮動元素child也會參與計算。

bfc-4.png

• 防止垂直margin重疊：正常情況下布局如下

bfc-5.png

兩個p元素之間的距離為50px，發生了margin重疊。根據BFC規則——“Box垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰box的margin會發生重疊”。因此可以在p外面包裹一個容器，將其設置為另一個BFC，那么兩個p元素就不再屬于同一個BFC，不會發生margin重疊。

bfc-6.png

• 總結
  以上例子都體現了BFC布局規則的“BFC其實就是頁面上一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之亦然。”
  所以，學習BFC并不難，只需要牢記規則，不確定的時候，在jsbin上試一試就可以了，但是需要在實踐中掌握原理。我認為無論是自適應兩欄布局，還是清除內部浮動，還是防止margin重疊，其實原理無外乎是這樣的：當BFC外部存在浮動時，因為它不影響BFC內部box布局，所以BFC會自己變窄，不會與浮動重疊。當BFC內部有浮動時，為了不影響外部元素布局，BFC在計算高度時會包括浮動元素的高度。同理，避免margin重疊時，因為BFC內外互不影響，所以要避免margin重疊，就將兩個box放在兩個BFC里面。

4. 在什么場景下會出現外邊距合并？如何合并？如何不讓相鄰元素外邊距合并？給個父子外邊距合并的范例

• 外邊距合并的場景：在CSS中，兩個或者多個毗鄰普通流上的塊級元素垂直方向上的margin會發生疊加。
• 合并示例：

margin-1.png

如圖所示，.box1和.box2的margin設置為20px，.box3的margin設置為30px，但是實際上三者之間的距離為：20px, 30px，發生合并。

• 不讓相鄰元素外邊距合并：建立BFC來避免垂直margin合并

margin-2.png

如圖所示，將.box2包裹在div中，建立一個BFC

• 父子邊距合并：

margin-3.png

可以看出：.father隨著.son向下走了30px，而.son相對.father的位置沒有變化，因為父子元素的margin-top合并了，文檔流內塊級元素的top與bottom邊距有時會合并（塌陷）為單個外邊距（合并后最大的外邊距），這樣的現象稱為外邊距塌陷。

• 父子邊距合并的解決方法：給父元素添加邊框、內邊距、內容作為分界線，或者讓父元素形成BFC

margin-4.png