BFC
BFC(Block Formatting Context) ------ 块级格式化上下文
w3c规范定义：浮动元素和绝对定位元素，非块级盒子的块级容器（inline-blocks，table-cells，table-captions），以及overflow的值不为visiable的块级盒子，都会为它们的内容创建新的BFC
相关定义：
block-level boxes（块级盒）------ 一个 block-level element块级元素 (‘display‘ 属性值为 ‘block‘, ‘list-item‘ 或是 ‘table’) 会生成一个 block-level box，这样的盒子会参与到 block-formatting context (一种布局的方式) 中
block-formatting context（BFC） ------ 在这种布局下，盒子所在的containing block顶部起一个接一个垂直排列，水平方向上撑满整个宽度。
containing block（包含块）------ 盒子本身为其子孙建立containing block，用于计算内部盒子的位置、大小。
哪些元素会触发BFC：
1.根元素；
2.float属性不为none;
3.position为absolute或者fixed
4.display:inline-block,table-cell,table-caption,flex
5.overflow不为visible
BFC布局准则：
1.内部盒子在垂直方向上，一个个垂直放置
2.其不会和float(浮动元素)重叠
3.其垂直方向由margin决定，同一BFC布局下的元素的margin会重叠
4.在其布局下，子元素的内容不管怎么变化都不会影响到其外部元素
5.其高度会把float浮动元素的高度也算进去
6.元素的左边会和其包含的盒子的左边想接触，存在浮动也是如此
BFC的用途：
1.由于不会和浮动元素进行重叠，所以在自适应的两栏布局上起到了很好的作用。
2.可以清除内部的浮动
3.可以去margin重叠，因为不同BFC布局下的元素margin不会重叠
样例分析：
自适应两栏布局
<div>
<img class="leftbox" src="../images/none_new.png">
<div class="rightbox">
<h3>开发商</h3>
<span>sdfsdfsdfsdfs士大夫撒旦法</span>
</div>
</div>
左边图片左浮动，右边内容可以设置BFC布局，不会和浮动元素进行重叠。
广为流传的俩种两栏自适应布局：
.rightbox{overflow: hidden;*display:inline-block;} //缺点是hidden可能会隐藏溢出部分
.rightbox{display: table-cell;width:2000px;*display: inline-block;*width: auto}
IFC
IFC( Inline Formatting Contex) ------ 内联格式化上下文
w3c规范定义：从父元素的顶部开始，盒子一个接着一个横向排列，横向的margin/border/padding在这些盒子中都是有效的。盒子间可能通过不同的方式垂直对齐（底部、顶部、文字基线对齐）。
相关定义：
line box (行盒模型) ----- 根据块状容器内，每一行的多个内联元素共同生成一个行盒模型。当内联盒子的宽度超过line box,内联盒子会被分解成几个盒子，然后分布在几个line box里面，如果内联盒子不能被分解（例如：单词或者white-space:nowrap），它就会超过line-box。
影响布局的css:
1.font-size
2.line-height
3.height
4.vertical-align
原文地址：https://www.cnblogs.com/wjmm/p/8400387.html