一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第7天，点击查看活动详情。
什么是BFC
• BFC(Block formatting context) • 直译为"块级格式化上下文" • 它是网页中一个独立的渲染区域（ 也成为formatting context ）。 • 这个渲染区域只有块级（Block）元素才能参与。 • 它规定了内部的块级元素如何布局。 • BFC渲染区域内部如何布局，与区域外部毫不相干。 • 外部元素也不会影响BFC渲染区域内的元素。
什么是BFC • 简单说：BFC就是页面上的一个隔离的独立渲染区域。 • 区域里面的子元素不会影响到外面的元素。 • 外面的元素也不会影响到区域里面的子元素。
2种渲染区域（Formatting Context）
其实，css中有2种渲染区域： • 块级元素渲染区域 和 行级元素渲染区域
BFC的布局规则
- 默认，内部的块元素会在垂直方向，一个接一个地放置。每个块元 素独占一行
- 块元素垂直方向的总距离由边框内大小+margin共同决定
- 属于同一个BFC的两个相邻块元素在垂直方向上的margin会发生重 叠/合并。但水平方向的margin不会
- 左侧BFC渲染区域的margin，必须与右侧BFC渲染区域的margin相衔 接，不能出现重叠
- 计算父元素BFC渲染区域的高度时，内部浮动元素的高度，都必须 算在内。
4种情况会形成BFC渲染区域
- float的值不是none
- position的值不是static或者relative。
- display的值是inline-block、table-cell、flex、table-caption或者 inline-flex
- overflow的值不是visible
