BFC (Block formatting context) “块级格式化上下文”
它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。
触发：
满足下列条件之一就可触发BFC
【1】根元素，即HTML元素
【2】float的值不为none
【3】overflow的值不为visible
【4】display的值为inline-block、table-cell、table-caption
【5】position的值为absolute或fixed
特性：
1、阻止垂直外边距（margin-top、margin-bottom）折叠
属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠。
解决：触发其中一个div的BFC，使得两个div不在同一个 BFC内，这样就可以阻止这两个div的margin重叠。
2、 包含浮动元素 ：将浮动的子元素包含在父元素中。
如下：
图1.1
元素内容比较多的时候，内容会环绕着浮动的元素。
图1.2
清除环绕，为文字div其本身创建一个BFC。
图1.3
图1.4
元素内容比较少的时候，会出现高度坍塌， 足够的文本去一个浮动的元素 ， 浮动元素脱离文档流，父元素（class=“father”）高度就会随着文本的减少而降低 ，父元素未被浮动元素撑开，父元素的高度坍塌。
图1.5
改变坍塌：为父元素创建一个BFC。
图1.6
图1.7
