曾经常用但未必了解之啥是BFC

前两天于某公司面试，曾被问道什么是BFC能不能解释一下，有关样式表的东西我一直认为没啥所以基本上没看过，一直凭着印象以为是盒模型之类的问题，长篇大论之后啪啪打脸，根本驴唇不对马嘴；之后虽然面试通过了，但是这玩意不搞清楚还是有点如鲠在喉的意思。

这种概念性问题，虽然各路blog一大堆,但是为了避免其他人理解后的再加工干扰，直接祭出MDN； 块格式化上下文—MDN

首先，BFC拼全了是Block Formatting Context，块格式化上下文，也不知怎的就想起了块级作用域（大误）
是Web页面的可视CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

楞一看，这不就是块级元素么，整这么高大上干啥，再往后看，不对；又是两码事

下列方式会创建块格式化上下文：

• 根元素（）
• 浮动元素（元素的 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 的元素
• contain 值为 layout、content 或 paint 的元素
• 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
• 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
• 多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
• column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）。

块格式化上下文包含创建它的元素内部的所有内容.
这么一看，就完全不是简单的某个属性之类的概念了，应该是某种布局方式中的规范，或者更准确的说是处理布局时针对某些实现的规则；
它（文中它均指BFC）是 W3C CSS2.1 规范中的一个概念，CSS2.1是2007年提出的样式表规范，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
参考链接：CSS 2.1
其中9.4包含了BFC和IFC的解释

9.4.1 Block formatting contexts
Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block. The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.
In a block formatting context, each box’s left outer edge touches the left edge of the containing block (for right-to-left formatting, right edges touch). This is true even in the presence of floats (although a box’s line boxes may shrink due to the floats), unless the box establishes a new block formatting context (in which case the box itself may become narrower due to the floats).
For information about page breaks in paged media, please consult the section on allowed page breaks.

当时常用的布局方式有普通文档流、浮动、定位；它就是属于普通文档流中的一种特性；具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

特性及应用

1. 同一个 BFC 下外边距会发生折叠
   再过去不了解的时候一直认为是外边距也就是magrin会合并是一种CSS的BUG，但事实上，只是BFC特性的一种
2. BFC 可以包含浮动的元素（清除浮动）
   说人话就是div>p[style=‘float:left’]时，div的高度仍然可以被p的高度撑开
3. BFC 可以阻止元素被浮动元素覆盖
   默认设置float后，就会有一种类似word文字环绕的效果，使用这个特性就可以解决这个问题，实现两列自适应布局贼方便

这里就不上代码和效果截图了，baidu一大把，而且也好实现；

9.9淘宝课件学来的前端果然要补习的东西太多了，看上述的特性以及应用实际上在当时使用的还是很多的，但是完全不知道还有这么一个规则存在着，加之今年来大规模的使用flex布局，以及各种ui库，进一步了解的机会更少了；简单翻翻，看看定义了解一下立马清楚了，虽然使用的机会可能不多，但是至少不会再在被问道时产生尴尬了。