BFC “块级格式化上下文” 学习

今天看文章 看到一个以前没看过的词,BFC 全称“块级格式化上下文”(Block Formatting Context)。BFC 类似一个“结界”，如果一个 DOM 元素具有 BFC，那么它内部的子元素不会影响外面的元素；外面的元素也不会影响到其内部元素。

平时布局的时候 清除浮动的一个技巧 float 的 overflow: hidden ，解决高度塌陷问题，子元素影响margin-top到父级 等问题，都是BFC的知识点（但我前面只知道怎么处理，并不知为什么这样 :stuck_out_tongue_closed_eyes: ）

触发 BFC 的条件：
1. html 根元素
2. float 不为 none
3. overflow 为 auto,scroll,hidden
4. display 的值为 table-cell, table-caption,inline-block 中任何一个
5. position 的值不为 static 和 relative
6. display:flow-root(无副作用 兼容性差)
7. 加border

BFC特性：
1. 内部的盒子会在垂直方向上一个接一个的放置
2. 解决margin重叠的问题。(错误)
3. 每个元素的左外边距与包含块的左边界相接触（从左到右），即使浮动元素也是如此
4. BFC的区域不会与float的元素区域重叠
5. 计算BFC的高度时，浮动子元素也参与计算
6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

网上很多文章说BFC可以解决margin重叠的问题，是因为浮动元素、inline-block 元素、绝对定位元素都在触发了BFC的同时解决了重叠问题。并不是BFC特性解决了margin重叠的问题。

应用场景：
1. 解决浮动子元素导致父元素，高度坍塌的问题
2. 解决文字环绕在float 四周的情况
3. 解决边距重叠问题 （父子，兄弟，空元素等)(错误)

BFC demo演示:http://case.crazyming.com/?link=web/topic/d7/bfc.html