BFC

block formatting context 块级格式化上下文

MDN 对 BFC 的描述

一个块格式化上下文（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) 很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局，并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

张鑫旭对 BFC 的描述

记住这么一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。

---

BFC的功能

准确来说，BFC没有定义，只有特性/功能。（如同大家都知道椅子能干什么，却无法定义）。

触发当前元素的BFC功能
MDN的描述里已经点明了如何创建BFC，这里介绍一种新属性：display:flow-root
这个属性直接触发BFC功能而没有副作用。（css不正交）
注意，这个特性有些浏览器不支持。

功能一：爸爸管儿子

• 包住里面所有的东西，即使里面的元素有浮动。
  
• 爸爸可以管住儿子，但当儿子也是BFC时，爸爸就管不了孙子了。（MDN解释：一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素。）

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

这里弟弟是BFC，不想跟哥哥有任何关系。
哥哥和弟弟设置一段距离，设哥哥的margin和弟弟的margin是不一样的。
假如距离是x，那么设哥哥的margin为x就好了，弟弟不想和哥哥有关系，自然也不会与哥哥的margin有关系。
如果设弟弟的，要设置为哥哥的width+x才可以。

注意：

• 清除浮动就用专门清除浮动的方法，不要用BFC，因为实现BFC的过程中会带来副作用。

.clearfloat{
    zoom:1
}
.clearfloat:after{
    content: ".";
    height: 0;
    visibility: hidden;
    display: block;
    clear: both;
    }

• 同理，兄弟之间划清界限也不要用BFC，可以用display:flex布局。
• 那BFC还要来干嘛？答，BFC是一个时代的产物，曾经很拉风，现在就。。