BFC的作用

万事万物寻其根本，就是规范。

一个简单的问题，上下两个div，一个margin-bottom:500px 一个margin-top:800px，问他们之间的间距是多少。

要理解这些，需要了解CSS盒子布局的规范，也就是BFC。

1.概念
BFC(Block Formatting Context)]
是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。
它是W3C CSS 2.1 规范中的一个概念，是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

2.什么情况下会创建BFC

CSS规范说明了在下列这些情况下会创建新的block formatting context：

  1.浮动元素（float: left | right）；

  2.绝对定位元素（position: absolute | fixed）；

  3.行内块元素（display: inline-block）；

  4.表格的单元格（display: table-cells，TD、TH）；

  5.表格的标题（display: table-captions，CAPTION）；

  6.'overflow' 特性不为visible 的元素（除非该值已经传播到viewport?）；

  7.表格元素创建的"匿名框" 

注意，"display:table" 本身并不产生"block formatting contexts"。但是，它可以产生匿名框，其中包含"display:table-cell" 的框会产生块格式化上下文。总之，对于"display:table" 的元素，产生块格式化上下文的是匿名框而不是"display:table" 。

注意，是这些元素创建了块格式化上下文，它们本身不是块格式化上下。

3.BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

4.BFC的作用

1. 清除内部浮动
   我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。

2. 垂直margin合并
   在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
   折叠的结果：
   两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
   两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
   两个外边距一正一负时，折叠结果是两者的相加的和。

3. 创建自适应两栏布局
   在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。