BFC

前端精选文摘：BFC 神奇背后的原理
小科普：到底什么是 BFC、IFC、GFC 和 FFC

一：BFC (Block Formatting Context)定义

BFC 全称 Block Formatting Context，翻译块级格式化上下文。BFC 能够看做是隔离了的独立容器（渲染区域），容器里面的元素不会在布局上影响到外面的元素，至关于创建一个隐形的边界

前提：每一个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其余元素的关系和相互做用。在正常流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文。

2、BFC 的产生

• 根元素；
• float属性不为none；
• position为absolute或fixed；
• display为inline-block, flex, 或者inline-flex；
• overflow不为visible（可视的）；

3、特性

BFC（块级格式化上下文）对块级元素在渲染的过程当中遵循布局的规则：
一、内部的Box会在垂直方向，一个接一个地放置。

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每一个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。

三、BFC的区域不会与float box重叠。
四、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
五、计算BFC的高度时，浮动元素也参与计算。　

4、应用

一、margin 合并

下图1 header和body之间出现较大间隙的缘由是：h1里面有外边距，和header的外边距合并了

但给header构建一个BFC以后，外边距就不合并了。剩下的一点间隙是body的margin。

把body的margin取消以后，间隙就消失了

总结：（1）构建BFC是阻止外边距合并的方法之一(虽然加边框和padding也能够实现外边距合并)

（2）使用overflow：hidden，超出内容会被隐藏，因此使用要慎重

二、contain float，包裹浮动元素
先设置li为浮动，能够发现nav的高度是没有被撑开的。

当给nav造成一个bfc，nav的高度就被撑开了。计算BFC高度的时候，是包括浮动元素的

也能够经过浮动，来造成BFC.但若是只是为了撑开父元素，设置浮动是很不明智的。