BFC和IFC

在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。

BFC(Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域，或者说是在一定条件下的一种渲染规则。通俗一点讲，可以把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素，反之也如此。

IFC行内格式化上下文， 在行内格式化上下文中，框（box）一个接一个的水平排列，起点是包含块的顶部。水平方向上的 margin、border和padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。

BFC规定了内部的Block Box如何布局。
定位方案：

1. 内部的Box会在垂直方向上一个接一个放置。
2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
3. 每个元素的margin box 的左边，与包含块border box的左边相接触。
4. BFC的区域不会与float box重叠。
5. BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
6. 计算BFC的高度时，浮动元素也会参与计算。

满足下列条件之一就可触发BFC
1. 根元素，即html
2. float的值不为none（默认）
3. overflow的值不为visible（默认）
4. display的值为inline-block、table-cell、table-caption
5. position的值为absolute或fixed

BFC的用处
1、清除浮动
    如果子元素都是浮动的，受浮动影响，父元素的高度会塌陷。
    解决方案：为父元素加上overflow：hidden；使其形成BFC，根据BFC规则第六条，计算高度时就会计算float的元素的高度，达到清除浮动影响的效果。
2、布局：自适应两栏布局
    如果不想要文字环绕图片的布局效果，而是想要图片文字各占两列，那么只需触发文字容器的BFC，根据规则第4、5条，BFC的区域是独立的，不会与页面其他元素相互影响，且不会与float元素重叠，因此就可以形成两列自适应布局。
3、防止垂直margin合并
    我们知道，如果上下两个相邻元素都有margin，那么上面元素的margin-bottom和下面元素的margin-top会合并，只取两者中的最大值作为中间的距离，而不是相加。
    解决方法：为其中一个元素的外面包裹一层元素，并为这个外层元素设置overflow：hidden；使其形成BFC。
根据BFC规则第五条，BFC内部是一个独立的容器，所以不会与外部相互影响，可以防止margin合并。