MDN上是这么介绍BFC的：
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。
块格式化上下文对于定位 (参见 float) 与清除浮动 (参见 clear) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。
CSS官方文档是这么介绍BFC的：
浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文
在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
在一个块格式化上下文中，每个盒的left外边（left outer edge）挨着包含块的left边（对于从右向左的格式化，right边挨着）。即使存在浮动（尽管一个盒的行盒可能会因为浮动收缩），这也成立。除非该盒建立了一个新的块格式化上下文（这种情况下，该盒自身可能会因为浮动变窄）
大手子张鑫旭是这么介绍BFC的：
BFC全称”Block Formatting Context”, 中文为“块级格式化上下文”。啪啦啪啦特性什么的，一言难尽，大家可以自行去查找，我这里不详述，免得乱了主次，总之，记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。
读完上面三段介绍，我发现我的内心是懵逼的，BFC是什么？不知道......
好吧，那就跟着文档试一试吧，看看到底什么是bfc:
浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文
非块盒的块容器（例如.......），我试了试，他说的就是，不是block也不是inline的元素。也就是说这样的元素，会创建一个块格式化上下文。
好，现在块格式化上下文有了，我们来做些什么事情试一试这玩意有啥用：
非bfc
bfc
我擦，浮动元素居然也没跑到它爸爸外边去....厉害厉害
再试试它还能干啥：
非bfc
bfc
我擦，同级元素的浮动居然盖不住触发bfc的元素...厉害厉害
再试试看还能干啥：
非bfc
没有创建bfc，子元素的margin-top居然跑出来了，还带着他爸爸一起跑了，那我加上bfc试试：
bfc
厉害厉害，居然能够防止margin穿透
就这样吧，其实这些玩意在我们日常使用css中时有发生，并不是什么很特殊很屌的东西。那么BFC是什么，能做什么，有什么用我们来总结一下。
1.是什么？
块格式化上下文，英文名 Block Formatting Context ，简称BFC！
它不是一个具体的什么东西，它只有一些特点和功能。
2.有哪些特点？
1.浮动元素无法逃脱父元素
2.两个创建了BFC的元素互不干扰，界限分明
3.内部元素的margin出不去。
3.能做什么？
1.清除浮动
2.自适应左右布局
3.避免margin穿透
4.有什么用？
屁用没有，面试官喜欢问，所以你就得学。为什么屁用没有？因为BFC能实现的都能用别的实现，还避免的BFC的一些不必要的bug。为啥有bug，我们来看一下都是怎么创建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，都tm附加了一些别的样式，比如你为了清除浮动会把元素绝对定位吗？你为了自适应两栏布局会table-cell吗？
overflow：hidden与clearfix清除浮动哪个好？flex布局与BFC实现的自适应两栏布局哪个好？至于避免margin穿透，你给父元素加一个最小0.1px的border就好了。
5.很重要的一个属性
display: flow-root，该属性没有副作用，只是单纯的创建BFC，这是一个很好的属性，但是这个属性很新，兼容性是个问题
网友评论