bfc(block formatting contexts),中文翻譯塊級格式化範圍。預設產生bfc的元素只有html，預設產生haslayout=true的元素則不止html。
通過**來感受一下bfc到底是用來幹什麼的（主要根據css對於bfc的一系列規範）
首先是可以產生bfc的方法
1.float的值不為none。
2.overflow的值不為visible。
3.display的值為table-cell, table-caption, inline-block中的任何乙個。
4.position的值不為relative和static。
最常用的是overflow:hidden;理由和zoom一樣，這樣一般不會影響到其他屬性。
1.解決包含框高度塌陷，防止浮動子元素越界。
複製**
我們可以看到div高度塌陷，浮動元素img超出了div的邊界
css2.1 規範第 10.6.3 部分的高度計算規則，在進行普通流中的塊級非替換元素的高度計算時，浮動子元素不參與計算。
css2.1 規範第10.6.7部分的高度計算規則，在計算生成了 block formatting context 的元素的高度時，其浮動子元素應該參與計算。
所以我們給box設定overflow:hidden;是其產生bfc從而使其內部的浮動元素參與自生高度的計算
複製**
父元素被撐開
2.防止與浮動元素重疊
你好啊
複製**
p元素與浮動img元素發生了重疊
由於bfc本身不會與浮動元素疊加，所以只需讓p元素產生bfc即刻解決重疊問題，所以我們給p元素新增乙個overflow:hidden;(當然還可以新增clear:both來清除浮動帶來影響)
你好啊
複製**
3.解決上下相鄰兩個元素外邊距重疊
複製**
間距只有20px，而不是希望得到的40px
根據 css 2.1 8.3.1 collapsing margins 第一條，兩個相鄰的普通流中的塊框在垂直位置的空白邊會發生摺疊現象。也就是處於同乙個bfc中的兩個垂直視窗的margin會重疊。
根據 css 2.1 8.3.1 collapsing margins 第三條，生成 block formatting context 的元素不會和在流中的子元素發生空白邊摺疊。所以解決這種問題的辦法是要為兩個容器新增具有bfc的包裹容器。
塊級格式化上下文
html文件中元素的定位有3種方式 普通流 絕對定位 浮動 除普通流以外，浮動與絕對定位都會導致元素脫離普通流，按照各自的方式進行定位。帶有bfc屬性的容器屬於普通流的一種。塊格式化上下文是頁面 css 視覺渲染的一部分。它是用於決定塊盒子的布局及浮動相互影響範圍的乙個區域。bfc是元素在擁有某些特...
塊級格式化上下文（BFC）
最近遇到乙個專業的名詞，不是很懂，所以了解了一下，並總結歸納一下。首先清楚我們的問題是什麼？bfc是什麼？怎麼建立？什麼情況下建立？有什麼特性和作用？bfc 就是一種屬性，這種屬性會影響著元素的定位以及與其兄弟元素之間的相互作用。1，浮動元素，float 除 none 以外的值 2，絕對定位元素，p...
BFC 塊級格式化上下文
bfc簡述 bfc即 block formatting contexts 塊級格式化上下文 是 w3c css2.1 規範中的乙個渲染規範，是頁面中的一塊渲染區域並且有自己獨有的渲染規則，決定了子元素的渲染位置以及和其他元素之間的關係和相互作用。bfc規則 同一bfc內的塊元素的上邊的邊距重疊 規定...