BFC与IFC概念理解

参考文章：https://segmentfault.com/a/1190000009545742

BFC布局规则：

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

怎样形成一个BFC？

1. 根元素或其它包含它的元素
2. 浮动 (元素的 float 不是 none)
3. 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
4. 非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
5. 块级元素具有overflow ，且值不是 visible
   整理到这儿，对于上面第4条产生了一个small small的疑问：为什么display: inline-block;的元素是inline level 的元素，参与形成IFC，却能创建BFC？

后来觉得答案是这样的：inline-block的元素的内部是一个BFC，但是它本身可以和其它inline元素一起形成IFC。

BFC用处

1.清除浮动
2.布局：自适应两栏布局
3.防止垂直margin合并：其中一个元素的外面包裹一层元素。并为这个外层元素设置 overflow: hidden;，使其形成BFC。因为BFC内部是一个独立的容器，所以不会与外部相互影响，可以防止margin合并。