讲不清楚的BFC

BFC全称"Block formatting Context"，也叫块级格式化上下文。
CSS文档里对BFC的描述

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

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

在一个BFC中，每个盒的left外边（left outer edge）挨着包含块的left边。即使存在浮动，这也成立。除非该盒建立新的BFC。

MDN对BFC的描述

一个BFC由以下之一创建：

1，根元素或其它包含它的元素
2，浮动元素 (元素的 float 不是 none)
3，绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4，内联块 (元素具有 display: inline-block)
5，表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
6，表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7，具有overflow 且值不是 visible 的块元素，
8，display: flow-root（css3）
9，column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

功能1：可以让没有被爸爸（父元素）包住的儿子（子元素）进入爸爸的怀抱

kslFeg.png

当son元素浮动，dad元素包不住son元素，给dad元素加BFC包住浮动元素son

ksl57Q.png

• 但是要注意的是，日常工作不建议使用BFC来清除浮动，因为由于CSS不成交的特性，加BFC可能会有附加的不希望出现的效果，而清除浮动clearfix可以完全替代BFC

  
  ks8dXV.png

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

ksGlg1.png

当gg元素浮动时，可以看到gg是覆盖在dd元素上边的，给dd元素加BFC可以让他们划清界限

ksGtED.png