BFC外边距穿透的理解

一、何为BFC

首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。转换为 BFC的理解则是：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）；

三、BFC的特点

1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时，浮动元素也参与计算
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

四、合并外边距与BFC

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。
折叠的结果：
1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3.两个外边距一正一负时，折叠结果是两者的相加的和。
触发条件：
必须是处于常规文档流的块级盒子，并且处于同一个BFC中。
没有将他们分开的东西，如padding、border、clearance。
在垂直方向上是相邻的，相邻的情况有以下几种
1、元素的margin-top与其第一个处于常规文档流中的子元素的margin-top
2、高度自动的元素的margin-bottom与其最后一个处于常规文档流中子元素的margin-bottom
3、元素的margin-bottom与其下一个处于常规文档流转红的兄弟元素的margin-top
4、元素的margin-top与其margin-bottom，但需满足自身没创建BFC、min-height为0、不包含正常文档流的子元素、高度为0或者auto。
解决方法：
要避免这个问题，可以让触发条件不成立，从而解决问题，所以有以下几种解决方法
1、给父元素加高度或者设置padding值，将他们分开。
2：把父元素变成一个 block formating context ，也就是新建一个BFC，根据BFC的定义，下面是可选的方法
a、float: left/right
b、position: absolute
c、display: inline-block/table-cell
d、overflow: hidden/auto

总结

BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。