BFC和IFC

BFC与IFC

在解释BFC之前，先说一下文档流。定义：从左到右，从上至下的布局，并且符合html中标签的本身含义的布局，比如某些标签属于行内元素，有些标签独占一行。
我们常说的文档流其实分为定位流、浮动流、普通流三种。而普通流其实就是指BFC中的FC。

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

Fc（formatting context）它是W3C CSS2.1规范中的一个概念，直译过来是格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

常见的FC：
block formatting context（BFC | 块级格式化上下文）
inline formatting context（IFC | 行内格式化上下文）

Box：一个页面是由很多个box组成的，元素的类型和display属性决定了这个box的类型，不同类型的box，会参与不同的formatting context。
Block level的box会参与形成BFC，比如display值为block、list-item、table的元素。
Inline level的box会参与形成IFC，比如display值为inline、inline-table、inline-block的元素。

IFC布局规则

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

BFC布局规则

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

怎样形成一个BFC

块级格式化上下文有以下之一创建：

根元素，即HTML标签

float的值不为 none，为 left、right
overflow值不为 visible，为 auto、scroll、hidden
display值为 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid
position值为 absolute、fixed

BFC的用处

BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。

1、清除浮动
如果子元素都是浮动的，受浮动影响，父元素的高度会塌陷。
解决方案：为父元素加上overflow：hidden；使其形成BFC，根据BFC规则第六条，计算高度时就会计算float的元素的高度，达到清除浮动影响的效果。

2、布局：自适应两栏布局
如果不想要文字环绕图片的布局效果，而是想要图片文字各占两列，那么只需触发文字容器的BFC，BFC的区域是独立的，不会与页面其他元素相互影响，且不会与float元素重叠，因此就可以形成两列自适应布局。
浮动 float+BFC(overflow)

通过overflow触发BFC（BlockFormattingContext块格式化文本）模式，内容与外界隔离，不受浮动影响（不会环绕浮动元素）。

   <style type="text/css">
       .left {
           float: left;
           width: 100px;
           margin-right: 20px;
       }
       .right {
           overflow: hidden;
       }
   </style>

   <div class="parent">
       <div class="left">
           <p>left</p>
       </div>
       <div class="right">
           <p>right</p>
       </div>
   </div>

3、防止垂直margin合并
我们知道，如果上下两个相邻元素都有margin，那么上面元素的margin-bottom和下面元素的margin-top会合并，只取两者中的最大值作为中间的距离，而不是相加。

解决方法：为其中一个元素的外面包裹一层元素，并为这个外层元素设置overflow：hidden；使其形成BFC。
根据BFC规则第五条，BFC内部是一个独立的容器，所以不会与外部相互影响，可以防止margin合并。