BFC：block fomating context
我總有種感覺自己在簡書上總結過這個，最近我老大讓我在他們那些技術大牛面前做技術分享精偿，自己耍了個滑弧圆，覺得大家js都是大牛級別的，我就講講CSS笔咽。搔预。
BFC是一個很神奇又很有用的利器，但是大多數前端工程師基本上不會花太多時間去研究叶组，只需要知道我們可以利用BFC來清除浮動拯田，利用BFC來防止margin重疊。其實做業(yè)務時甩十，這樣就真的夠了船庇。
但是，多知道點侣监，沒壞處鸭轮。
在理解BFC之前你需要確定自己知不知道包含塊的概念，這篇筆記只能假裝你知道啦橄霉。
BFC
block：塊級元素窃爷，大家都知道，默認不加修飾的情況下塊級元素并不會被收縮包裹其內容，其寬會充斥父元素按厘，高度由自身內容撐開医吊。每個塊級元素即使設置了寬度，不占滿父元素也會自己占據一行逮京，不讓其后元素與自己并行卿堂。
fomating context：格式化上下文，擁有一套渲染規(guī)則懒棉。對內來約束其內塊級元素的布局草描，對外來控制和外部元素的布局。
誤解：需要說明：觸發(fā)BFC后并不是使得非塊級元素像塊級元素一樣布局漓藕，但是確實會給觸發(fā)BFC區(qū)域的元素帶來有這樣的副作用陶珠，而是為觸發(fā)BFC的元素制定一套規(guī)則約束其內塊級盒子布局與對外部元素布局的影響挟裂。并不是改變自己的display模式享钞。BFC規(guī)則
[A] 內部的塊級Box會在垂直方向，一個接一個地放置诀蓉。
[B] 每個元素的margin box的左邊栗竖， 與包含塊的左邊(參考包含塊)相接觸(不重合)(對于從左往右的格式化，否則相反)渠啤。即使存在浮動也是如此狐肢。
[C] Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
[D] BFC的區(qū)域不會與float box重疊沥曹。
[E] BFC就是頁面上的一個隔離的獨立容器份名，容器里面的子元素不會影響到外面的元素。反之也如此妓美。（這里面的不會影響僵腺，只在文檔流內是不會影響的，脫離文檔流后壶栋，當忽略）
[F] 計算BFC的高度時辰如，浮動元素也參與計算
AF為BFC的渲染規(guī)則，當某個DOM元素被觸發(fā)BFC后贵试，會使該元素擁有AF的這些渲染規(guī)則琉兜。
- 觸發(fā)BFC的條件
- 根元素
根元素這個，很好理解毙玻。
html文檔建立豌蟋，就會觸發(fā)根元素的BFC，我們在根元素內寫幾個div元素桑滩，會發(fā)現內部div垂直排列梧疲，本身沒有兄弟元素，自然滿足B、D往声、E擂找、F這幾條規(guī)則，內部塊級盒子來自同一個BFC(html)浩销，所以相鄰margin會重疊贯涎，行內盒子橫向就不會重疊。 - float屬性不為none
當一個元素被設置為float:left or right,會觸發(fā)這個元素慢洋，生成BFC區(qū)域塘雳，使他不僅擁有BFC的渲染規(guī)則，而且會給自身帶來副作用普筹，display:block,但是這個元素不會像行內元素通過設置display:block變?yōu)閴K級元素那樣败明，寬度充滿其父元素，而是表現的更像行內塊級元素,只會使得行內元素不會收縮包裹其內容. - position為absolute或fixed
這個觸發(fā)器觸發(fā)生成BFC后太防，margin重不重疊這個對于他都沒有效果妻顶，可能定位流和一般的文檔流浮動流不屬于一個吧，蜒车，所以自然會與浮動元素重疊讳嘱。 - display為inline-block, table-cell
基本上每一條渲染規(guī)則都滿足 - overflow不為visible
這個對于來自不同BFC margin不會重疊這一條來說，不滿足酿愧，其他都能滿足
overflow:hidden通常是對父元素定義比較有效的沥潭。
另外一個很神奇的地方就是父子元素的margin也會發(fā)生重疊。
這時候只要觸發(fā)一方的bfc就可以解決父子元素margin重疊這個問題嬉挡，overflow:hidden還是針對父元素比較有效钝鸽。
，還有一個對父元素進行border的設置也可以解決父子元素margin重疊的問題庞钢。
