……什么是BFC？完全沒(méi)聽(tīng)過(guò)！
一.什么是BFC（和其他）
BFC全稱是Block Formatting Context，即塊格式化上下文，它是一個(gè)渲染區(qū)域。
IFC全稱是Inline Formatting Context，即行內(nèi)格式化上下文。
GFC全稱是Grid Formatting Contexts，即網(wǎng)格格式化上下文。
FFC全稱時(shí)Flex Formatting Contexts，即彈性盒格式化上下文，大家都是渲染區(qū)域。
BFC和IFC是CSS2.1的概念，GFC和FFC是CSS3新增的。
二. 哪些元素會(huì)生成BFC
根元素
float屬性不為none
position為absolute或fixed
display為inline-block, table-cell, table-caption, flex, inline-flex
overflow不為visible
三. BFC布局規(guī)則
內(nèi)部的Box會(huì)在垂直方向，一個(gè)接一個(gè)地放置。
Box垂直方向的距離由margin決定。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生重疊
每個(gè)元素的margin box的左邊， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)。即使存在浮動(dòng)也是如此。
BFC的區(qū)域不會(huì)與float box重疊。
BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。
計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算
四.心得
太抽象了……即使用起來(lái)也不會(huì)意識(shí)到自己在用這個(gè)規(guī)則……
山邊小溪寫(xiě)的簡(jiǎn)單又明白。
