BFC概念、触发条件、布局规则以及定位、宽高自适应简述

BFC

BFC概念：
解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。
**Box：CSS 布局的基本单位，直观来说，一个页面就是由若干盒子组成。display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
1、block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
2、inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
3、run-in box: 存在于css3 中。
Formatting Context：W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。<