要理解BFC和IFC，首先要理解另外两个概念：Box和FC（即格式化上下文）。Box一个页面由许多Box组成，元素的类型和display属性决定了Box的类型。不同类型的Boxes将参与不同的FormattingContexts。块级框会参与BFC的形成，比如显示值为block、list-item、table的元素。inlinelevelboxes会参与IFC的形成，比如显示值为inline、inline-table、inline-block的元素。参考：W3C文档block-levelFC(FormattingContext)，这是W3CCSS2.1规范中的一个概念，在页面中定义了一个渲染区域，有一套渲染规则，决定了它的子元素将如何定位，与其他元素的关系和交互。常见的格式化上下文有：块格式化上下文（BFC|块级格式化上下文）和内联格式化上下文（IFC|内联格式化上下文）。下面介绍一下IFC和BFC的布局规则。IFC布局规则：在内联格式化上下文中，框一个接一个地水平排列，从包含块的顶部开始。水平边距、边框和填充在框之间保留。框可以以不同的方式垂直对齐：它们在顶部或底部对齐，或者根据其中文本的基线对齐。包含这些框的矩形区域将形成一行，称为行框。BFC发布规则：W3C译文：浮动、绝对定位元素、不是块盒的块容器（例如内联块、表格单元格和表格标题），以及具有“溢出”而非“可见”的块盒（除非该值已传播到视口）为其内容建立新的块格式化上下文。在块格式化上下文中，框从包含块的顶部开始一个接一个地垂直放置。两个同级框之间的垂直距离由“边距”属性确定。块格式化上下文中相邻块级框之间的垂直边距折叠。在块格式化上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式，右边缘接触）。即使存在浮动也是如此（尽管框的行框可能会由于浮动而缩小），除非框建立新的块格式化上下文（其中h情况下，由于浮动框本身可能会变窄）。中文排列：内部的Box会在垂直方向上一个接一个的放置，Box的垂直距离由margin决定。属于同一个BFC的两个相邻Boxes的边距将与每个元素的左外边缘（margin-left）重叠，触及包含块的左侧（containboxleft）（对于从左到右的格式，否则对面的）。即使存在浮动也是如此。除非这个元素本身形成一个新的BFC。BFC的区域不会和浮动框重叠。BFC是页面上一个隔离的独立容器，容器内部的子元素不会影响外部的元素。反之亦然。BFC计算高度时，浮动元素也参与计算参考：W3C文档inline-formattingW3C文档block-formatting如何组成BFC？块级格式化上下文由以下之一创建：根元素或包含它的其他元素是浮动的（元素的浮动不是无）绝对定位的元素（元素的位置是绝对的或固定的）非块-level元素有display:inline-block,table-cell,table-caption,flex,inline-flex块级元素有overflow，值不可见。整理到这里，上面第4条出现了一个小问题：whydisplay:inline-block;element是内联层次的元素，参与IFC的形成，但是可以创建BFC吗？后来我想答案是这样的：inline-block元素内部是一个BFC，但是可以和其他inline元素组成一个IFC。BFC的使用1.清除浮动
