BFC 定義 BFC(Block formatting context)直譯為"塊級格式化上下⽂文"。它是⼀一個獨⽴立的渲染區域，只有Block-level box參 與， 它規定了內部的Block-level Box如何佈局，並且與這個區域外部毫不相干。 BFC佈局規則：內部的Box會在垂直⽅方向 ...
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就是⻚頁⾯面上的⼀一個隔離的獨⽴立容器，容器⾥里⾯面的⼦子元素不會影響到外⾯面的元素。反之也 如此。
