什麼是bfc（blockformattingcontext）
formattingcontext(格式化上下文)是w3ccss2.1規範中的乙個概念。它是頁面中的一塊渲染區域，並且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關係和相互作用。
而blockformattingcontexts(bfc，塊級格式化上下文)，就是乙個塊級元素的渲染顯示規則。具有bfc特性的元素可以看作是隔離了的獨立容器，容器裡面的元素不會在布局上影響到外面的元素，並且bfc具有普通容器所沒有的一些特性。
bfc的布局規則如下：
1.內部的盒子會在垂直方向，乙個個地放置；
2.bfc是頁面上的乙個隔離的獨立容器；
3.屬於同乙個bfc的兩個相鄰box的上下margin會發生重疊；
4.計算bfc的高度時，浮動元素也參與計算
5.每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；
6.bfc的區域不會與float重疊；
那麼如何觸發bfc呢？只要元素滿足下面任一條件即可觸發bfc特性：
body根元素；
浮動元素：float不為none的屬性值；
絕對定位元素：position(absolute、fixed)
display為：inline-block、table-cells、flex
overflow除了visible以外的值(hidden、auto、scroll)
bfc到底有什麼用呢？
塊格式化上下文對於定位與清除浮動很重要。定位和清除浮動的樣式規則只適用於處於同一塊格式化上下文內的元素。
1、同乙個bfc下外邊距會發生摺疊
也就是說，兩個相鄰的普通流中的塊元素垂直方向上的margin會摺疊。
這裡兩個p的外邊距為100px，而不是200px。之所以發生外邊距摺疊，是因為他們同屬於body這個根元素。
利用bfc可以消除margincollapse
bfc導致了margincollapse，而現在又要用它來解決margincllapse.但是始終要記住一點：只有當元素在同乙個bfc中時，垂直方向上的margin才會clollpase.如果它們屬於不同的bfc，則不會有margincollapse.因此我們可以再建立乙個bfc去阻止margincollpase的發生。
.wrap
.p2、bfc可以包含浮動的元素（清除浮動）
正常情況下，浮動的元素會脫離普通文件流，使父元素高度坍塌。即外層的p會無法包含內部浮動的p。
但如果我們觸發外部容器的bfc，根據bfc規範中的第4條：計算bfc的高度時，浮動元素也參與計算，那麼外部p容器就可以包裹著浮動元素。
3、bfc可以阻止元素被浮動元素覆蓋/（兩欄布局）
什麼是BFC規則？
block formatting context 塊級格式化上下文 塊級元素的渲染區域規則 bfc盒子 外部不影響內部 內部不影響外部 1.float不為none 2.position屬性為absolute和fixed 3.oveflow不為visiable 4.html 根標籤1.bfc盒子內部的...
前端什麼是BFC
什麼是bfc？全稱塊級格式化上下文？什麼意思不懂。看了好多部落格，基本都是抄的，真心都不是大白話。我今天來總結一下，用菜鳥級別的語言來描述。bfc 應該可以抽象成乙個 獨立的個體，出淤泥而不染的白蓮花。是的不受其他元素的影響，始終保持自己獨立。就是正常的普通流布局規則，設定的樣式是什麼樣的，就按正常...
CSS8 到底什麼是BFC？
現在有flex布局等新技術，bfc的效果比如包住元素，進行自適應布局等已經不需要了。現在只有免式的事後才需要知道bfc！9.4.1 塊格式化上下文 浮動，絕對定位元素，非塊盒的塊容器 例如，inline blocks，table cells和table captions 和 overflow 不為 ...