BFC是啥？display: flow-root是啥？

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

一个块格式化上下文由以下之一创建：

• 根元素或其它包含它的元素
• 浮动元素 (元素的 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 的元素并不被包裹在一个多列容器中。

一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。

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

——摘自MDN

是不是很懵逼？？？

 

BFC这东西不好下定义，最好是举具体的例子告诉别人BFC可以干什么。

BFC的两个功能：

• 父元素包裹住子元素
• 兄弟元素之间划清界限

 

1、父元素包裹住子元素

用 BFC 包住浮动元素，儿子是浮动元素，正常情况下，浮动元素会脱离文档流离开爸爸的怀抱。但是BFC的功能就是不让儿子跑出爸爸的怀抱。

如何触发BFC？

第一种：

父元素加上display:flow-root        没有副作用，但是兼容性差。display:flow-root属性是css新增的属性，专门用来触发BFC，不干别的。

 

其余N种方法（但有副作用）

除此之外还有文章开头提的如下方法都可以触发BFC，但是相应的会有副作用，比如overflow：hidden；我只是想触发BFC不想hideen，但是没办法。所以css新增了display：flow-root属性，但是兼容性又不好·····

• 根元素或其它包含它的元素
• 浮动元素 (元素的 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 的元素并不被包裹在一个多列容器中。

 

2、兄弟元素之间划清界限

用 float + div 做左右自适应布局，正常情况下给哥哥一个浮动元素，让其脱离文档流，这时兄弟元素弟弟会这样：

 

然后我们在弟弟身上触发BFC（文章开头提到的方法都行），我们这里增加一个display:flow-root;

这时哥哥与弟弟形成了左右自适应布局，哥哥的margin-right：20px；也有用了。

 

BFC就是这样一个东西，不好下定义，但是可以举例说明。如果面试官问你什么是BFC，举例说明就可以满分。