BFC剖析

首先，BFC作为一个特殊的容器，或者说特殊的布局环境，因为并不是div这种需要标签生成的box，而是通过某些条件 激活的一个环境，所以严格来讲不能称为容器，它有几条规则。

1.在BFC环境下，每个元素都会贴着BFC的边框“垂直”排列。
例如：两个div，一大一小，小的设置了左浮动，看起来的效果就是小的贴着大的的左边和上边，并且覆盖住那一部分。
2.BFC垂直方向的距离由margin决定，属于一个BFC的两个相邻元素会发生margin重叠（也就是会发生塌陷和margin-bottom和margin-top重和的原因）
举例：有两个div发生了margin重叠，就给其中一个外套一层容器，然后给那个容器一个overflow：hidden触发生成一个新的BFC，那么两个div就不在同一个BFC了，即不会发生重叠。这就是当发生margin重叠时，加overflow：hidden就能解决的原理
3.BFC中，每个元素贴着边框，第一条规则里提到了。
4.BFC的区域不会和设置了漂浮的元素重合，这也反映了它所具有的不会影响外部元素布局的特性。
举例：两个div，一个div设置了float，触发了BFC，这时候给另一个div设置overflow：hidden也触发BFC，两个BFC间根据特性不会相互影响，这时候设置了overflow的div为了不和有浮动的产生重叠部分，就会变窄，可以理解为它和浮动div重叠的部分被隐藏了。
5.计算BFC高度时，内部设置了漂浮的元素也会参与。可以根据这条规则解决父类没设置高度时，子类设置漂浮后父类高变为0的情况。
举例：一个父类div里有一个子类div，然后子类div设置了漂浮，当然也触发了BFC,在父类中生成了一片BFC环境，但是这个并不影响这个问题的讨论，子类漂浮，父类失去高度，这时候给父类一个overflow触发BFC，根据第五条规则，他的高度计算就会算上漂浮子类，然后就又有高度了。这也从侧面反映了BFC里面的元素无论如何不会影响外面，可以这么理解，父类变为BFC后，为了不让设置了漂浮的子类影响外面的布局，所以他的高度也跟着子类变化了。