什么是BFC？BFC的规则和BFC触发的办法

什么是BFC？BFC的规则和BFC触发的办法

1什么叫BFC

Block Formatting Contexts 即块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box（display 属性为 block, list-item, table 的元素）如何布局，并且与这个区域外部毫不相干。其中 Formatting Context 是一个决定如何渲染文档的容器，
Formatting context是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和
其他元素的关系和相互作用。最常见的Formatting context有Block fomatting context(BFC)和Inline formatting context(IFC)。CSS2.1 中只有BFC和
IFC, CSS3中还增加了GFC和FFC。

通俗点说，BFC就是一个独立的盒子，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。
在文档呈现开始的时候，会自动创建一个BFC来对整个页面进行布局，在没有创建一个新的BFC的时候，整个文档就这一个BFC。

2.BFC的规则

1.内部的box会在垂直方向，从顶部开始一个接着一个地放置（上面的例子可以看出）

2.同一个BFC中，在两个相邻的块级元素中，垂直margin会发生折叠

3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)，即使存在浮动也是如此

4.BFC的区域不会与float box重叠

5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

6.计算BFC的高度时，浮动元素也参与计算

参考：
1.触发BFC的容器内部的block是一个一个从上往下排列的，跟HTML的规范一样（块级元素换行显示）。

2.BFC容器内，box的外边距由margin决定，两个相邻元素的外边距由最大margin决定而且会重叠（如果一个元素margin为200px，另一个为100px，那么它两的外边距会取最大值200px）。

3.BFC容器内的block子元素与BFC容器的border-left紧贴（从右往左格式化的就是border-right）。

4.BFC容器内部的float元素不会导致BFC容器崩塌，也就是说BFC容器能计算float元素的宽高。

5.BFC里面的子元素不会影响外面，外面也不影响里面。

3.触发BFC的方法：

根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、``table-row、 table-row-group、``table-header-group、``table-footer-group（分别是HTML 					
table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 [flow-root](https://drafts.csswg.org/css-display/#valdef-display-flow-root) 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 ``column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

4.BFC的应用

（1）清除盒子垂直方向上外边距合并——盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子垂直方向的margin会发生重叠。
（2）制作右侧自适应盒子——BFC不会与浮动盒子产生交集，而是紧贴浮动元素边缘。
（3）清除浮动——计算BFC高度时，自然也会检测浮动的子盒子高度。

在清除垂直外边距合并的案例中，父盒子中的子盒子的垂直方向上的外边距合并了，父盒子却并没有设置BFC功能。这是因为html默认创建BFC功能，而父盒子被html中的BFC渲染到，所以其子盒子垂直外边距才会产生合并。这一点很少被提及，也很容易被大多数人忽略。