为什么这么多人讲不清楚 BFC

BFC元素就是 里面的出不去，外面的也进不来。

CSS规范中对 BFC 的描述

9.4.1 块格式化上下文

浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和 ‘overflow’不为’visible’的块盒 会为它们的内容建立一个新的块格式化上下文

在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由’margin’属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并，取大的margin 值。

在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）

MDN 对 BFC 的描述

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

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

  • 根元素或其它包含它的元素
  • 浮动元素 (元素的 float 不是 none)
  • 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
  • 内联块 (元素具有 display: inline-block)
  • 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
  • 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
  • 具有overflow 且值不是 visible (默认值) 的块元素，overflow:hidden/auto;
  • display: flow-root ，CSS3新加的，专门用于触发 BFC，因为之前触发BFC的方式还附带其它作用。有了这个上面都可以不用了。
  • column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

一个BFC包括创建它的元素及其内部所有内容，如果该元素的后代元素创建了新的块级格式化上下文，那么它的后代元素内的元素不属于它的BFC。 code

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

张鑫旭对 BFC 的描述

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。

妈的，BFC 到底是什么？

先思考一个问题：

请问：什么是色情？

联邦最高法院大法官斯图尔特更有一句名言

我不知道什么是色情，不过，我看了之后，就能知道

I know it when I see it

类似地：

  1. 我不知道什么是 BFC
  2. 但是你写出样式，我就知道这是不是 BFC

BFC 就是这样的东西（ 堆叠上下文 也是）

  1. 它没有定义，定义讲不清楚
  2. 它只有特性/功能

因此学BFC最好的方式就是，跳过定义，直接学什么情况会产生BFC。

功能1：爸爸管所有儿子

BFC元素特性：其内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。

BFC元素就是始终会包裹住它的所有内容

举例

用 BFC 包住浮动元素。(这 TM 不是清除浮动，.clearfix 才是清除浮动且没有任何副作用）

demo

功能2：兄弟之间划清界限

同属于一个父元素的两个BFC 兄弟互不干涉。

举例

用 float + div 做左右自适应布局

code1

code2

上面都过时了，现在都用 flex 做左右自适应布局。

如何回答面试官

  1. 千万别解释什么是 BFC，一解释就错
  2. 用上面的例子回答什么是 BFC，先翻译BFC，然后什么情况产生BFC，BFC 特性和功能是什么

注意

  • bfc 主要是 div 的一个特性。bfc 会改变一个元素的宽高计算。
  • 不要用 bfc 清除浮动，会带来副作用，你倒是可以用 display: flow-root; 这个 bfc 方式清除浮动，因为没有副作用，但是目前兼容性不好。
  • bfc 是上个时代的产物，决定 bfc 好厉害啊，css3 以后 flex 布局就搞定了，还用什么 bfc 。flex 做左右自适应布局
  • bfc 没有什么时候必须要用，什么时候都有其它方法可以代替。千万别用 overflow: hidden; 比如用 bfc 去除 margin合并问题，但是 我们可以加 border-top 也可以。
  • bfc 现在只有面试才有用，直接给他看代码

心得

块格式化上下文 和 堆叠上下文虽然不是一个东西，总感觉很相似，

块格式化上下文描述能否出去，堆叠上下文描述能否重叠。

块格式化上下文 就是一个功能性的描述。