BFC及外边距折叠

bfc的定义：

简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 BFC中的元素的布局是不受外界的影响，并且在一个 BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

bfc产生的条件：

1、根元素；
2、浮动元素，float 除 none 以外的值；
3、定位元素，position（absolute，fixed）；
4、display 为以下其中之一的值 inline-block，table-cell，table-caption；
5、overflow 除了 visible 以外的值（hidden，auto，scroll）；

外边距折叠：

在css中两个或多个盒子（可能是兄弟元素也可能是是父子关系）的相邻边界（期间没有任何非空内容、补白、边框）折叠在一起，而形成一个单一的边界。//准确来说，外边距折叠应该叫垂直外边距折叠，因为只会发生在垂直方向上，而水平方向上不会发生。

外边距发生折叠情况：

1：父子外边距叠加
2：兄弟外边距叠加

什么时候会发生外边距折叠：

1：垂直方向上相邻的两个元素

					CSS:
					p{
					    margin: 50px;
					}
					HTML:
					<div id="demo">
					    <p>我是第一个p</p>
					    <p>我是另一个p</p>
					</div>

第一眼看去两个p之间会有50px+50px=100px的距离但事实是只有50px;
2：父元素和他的第一个或者最后一个子元素之间：
父元素的margin-top和第一个子元素的margin-top值发生折叠
父元素的nargin-bottom和最后一个子元素的margin-bottom值发生折叠

如果一个元素的min-height为0、没有border、没有padding、高度为0或者auto、不包含子元素，那么它自身的外边距会发生叠加

解决外边距折叠的方法：

1：浮动元素不会与任何元素发生叠加，也包括它的子元素
2：绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
3：inline-block元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
4：创建了BFC的元素不会和它的子元素发生外边距叠加，BFC会组织外边距发生折叠，但是同一个BFC下的子元素下外边距会发生折叠。

发生BFC的条件

a：浮动元素，float 除 none 以外的值；
b：绝对定位元素，position（absolute，fixed）；
c：display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
d：overflow 除了 visible 以外的值（hidden，auto，scroll）

总结BFC的作用：

1：给父级元素清除浮动，避免高度塌陷；

2：垂直margin合并。

3：在两栏布局中，可以用BFC避免浮动兄弟元素的遮盖。

部分内容属于摘抄