BFC

什么是BFC

CSS规范：格式化上下文（block formatting context）

MDN:一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。

张鑫旭：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。

总结：BFC没有定义，只有特性/功能。所谓的BFC就是css布局的一个概念，是一块区域，一个环境

解决什么问题：margin重叠，浮动高度塌陷，侵占浮动元素

创建BFC

根元素或其它包含它的元素

浮动元素 (元素的 float 不是 none)

绝对定位元素 (元素具有 position 为 absolute 或 fixed)

内联块 (元素具有 display: inline-block)

表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)

表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)

具有overflow 且值不是 visible 的块元素，

display: flow-root     **

column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

注意：

一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。（一个BFC，包含了这个元素本身和他所有的儿子，不包含他儿子（此儿子也是BFC）的儿子（也就是他孙子））

块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。（不是很懂）

BFC有哪些特性/功能

1、爸爸管儿子

用 BFC 包住浮动元素。（可以用clearfix清除浮动，BFC常常有副作用）

2、兄弟之间划清界限

用 float + div 做左右自适应布局（可以用flex做，更快捷）

注：flow-root

The element generates a block container box, and lays out its contents using flow layout. It always establishes a new block formatting context for its contents. [CSS2]。

翻译：元素生成块容器框，并使用流布局将其内容列出来。它总是为其内容建立新的块格式化上下文。