BFC

1.  什么是BFC ？
在一个Web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。
w3c规范中的BFC定义：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。
BFC是一个独立的布局环境，其中的元素布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

2.  哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible

怎么创建BFC。
1.  float布局示例理解BFC的行为。

<div class="box">
  <div class="float">I am a floated element.</div>
 I am text inside the box. 
</div>
 /* CSS */
 .box { border: 5px dotted rgb(214,129,137); width: 450px; padding: 10px; margin-bottom: 40px; }
 .float { padding: 10px; border: 5px solid rgba(214,129,137,.4); background-color: rgba(233,78,119,.4); float: left; width: 200px; margin-right:20px; }

没有足够的文本去围绕图片，同时由于浮动元素脱离文档流，盒子元素的边框（包含浮动元素和文本的容器）高度就会随着文本的减少而降低（常被理解元素浮动之后致使其父容器坍塌）。盒子元素边框的高度就会低于浮动元素的高度。 

 解决这个布局问题方式：一种是使用clearfix，是在文本和图片（浮动元素）的下面插入一个元素，比如div，并设置clear属性值为both。另外一种方法是使用overflow属性，把它设置为非默认值visible的值。overflow: auto;

overflow之所以能够有效是因为当它的值是非visible时会创建一个BFC，而BFC的一个特性就是包裹浮动元素。

 2.  BFC可以阻挡外边距叠加（Margins Collapsing）

BFC产生外边距折叠要满足一个条件：两个相邻元素要处于同一个BFC中。所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠。

<div class="box">
    <p></p>  <p></p>   
</div>
.outer { background-color: #ccc; margin-bottom:40px; }
 p { padding: 0; margin: 20px 0; background-color: rgb(233,78,119); color: #fff; }

由于p元素的边缘与.box元素的边缘之间没有任何东西，所以.box元素与p元素的margin会叠加，p会与.box的顶部与底部齐平，p对外的margin似乎与.box的margin合并了，使我们无法在段落的上下看到.box的灰色背景。由于margin叠加，我们看到.box内部上下没有灰色背景。
把.box元素变成一个BFC，它就可以包裹住p以及p的margin，外边距不会发生叠加，.box元素内部就会出现由p元素的margin顶出来的上下灰色背景。

创建BFC之后，外边距不再叠加。

 3. 一个BFC会停止去围绕浮动元素。在有浮动元素的列类型布局中常用到。如果一个元素创建了BFC，它就不会去围绕（或者说包裹）任何浮动元素。

<div class="outer"> <div class="float">I am a floated element.</div> <div class="text">I am text</div> </div>

类名为.float的元素将会浮动在布局的左侧，类名为.text的元素将会在它后面并围绕.float元素。
可以通过给.text元素创建一个BFC来阻止这种围绕行为。  .text {    overflow: auto;  }
.text元素建立BFC之后，文本就不再会围绕浮动元素了。

4.  创建一个BFC的常用方式
除了使用overflow来创建BFC之外，还有一些CSS属性也可以创建BFC。比如浮动一个元素也可以为该元素创建BFC，浮动元素会包裹它内部的所有元素。还有以下几种方式也可以创建BFC：
使用position:absolute或者position:fixed
使用display:inline-block、display:table-cell或者display:table-caption，其中table-cell和table-caption是表格相关元素对应默认CSS值，所以当你创建表格时，每个表格的单元格都会自动创建BFC
另外当使用多列布局时，使用了column-span:all也可以创建BFC。Flexbox和Grid布局中的元素也会自动创建类似BFC的机制，只是它们被称为FFC（弹性格式上下文）和GFC（网格格式上下文）。这反映了它们所参与的布局类型。一个BFC表明他内部的元素参与了块级布避，一个FFC意味着它内部的元素参与了Flexbox布局。

创建BFC，但会有一些副作用：
1、display: table 可能引发响应性问题
2、overflow: scroll 可能产生多余的滚动条
3、float: left 将把元素移至左侧，并被其他元素环绕
4、overflow: hidden 将裁切溢出元素

5.   创建BFC的新方式
使用display:flow-root安全的创建BFC，来解决上文中提到的各种问题：包裹浮动元素、阻止外边距叠加和阻止围绕浮动元素。

6.    合并外边距
在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
产生折叠的必备条件：margin必须是邻接的!
而根据w3c规范，两个margin是邻接的必须满足以下条件：
必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
都属于垂直方向上相邻的外边距，可以是下面任意一种情况
元素的margin-top与其第一个常规文档流的子元素的margin-top
元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom
折叠的结果：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。