css中bfc和ifc

bfc

定义：块级格式化上下文，他是一个独立的渲染区域，他规定了这个内部如何布局，并且与这个区域的外部毫不相干。

BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC的区域不会与float box重叠，常用来清除浮动和布局。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素也参与计算

生成bfc的元素有哪些：

float的属性不为none

position为absolute和fixed

overflow不为none

display为inline-block，table-cell，flex，inline-flex

ifc

定义：行内格式化上下文

IFC布局规则：

框会从包含块的顶部开始，一个接一个地水平摆放。

摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。

行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。

行框一定会高到足以容纳它所包含的全部框。然而，它也可能比它所包含的最高的框还要高（例如：这些框是以基线对齐）。当框 B 的高度小于包含它的行框时，则 B 在行框中垂直对齐的位置由’vertical-align’ 属性来决定。当几个行级框在水平方向上无法塞得进同一个行框时，它们会被分布在两个或多个垂直堆放的行框中。行框会以既没有垂直间距 也没有重叠的方式被垂直堆放起来。

通常，行框的左边紧贴其包含块的左边，而行框的右边紧贴其包含块的右边。然而，浮动框可以插在包含块边缘与行框边缘之间。因此，尽管在同一个IFC中的行框通常有同样的宽度（也就是其包含块的宽度），但它们的宽度也可能受浮动让水平可用空间减少的影响而有所改变。在同一个IFC中，行框的高度通常是变化的（例如：某一行包含了一个比较高的图片，而其它行只包含文本）。

当一行上的行级框的总宽度小于包含它们的行框的宽度，则它们在行框内的水平分布由’text-align’属性来决定。

当一个行内框的宽度超过了行框的宽度，则它会被分割成几个框，而这些框会分布在几个行框。如果此行内框不可分割（例如：单个字符、或语言指定的文字打断规则不允许在此行内框中出现打断、或该行内框受 white-space 属性为 nowrap或 pre 的影响），那么该行内框溢出该行框。

行内框被分割的时候，外边距、边框和内边距在出现分割的地方都没有视觉效果。

**行高计算 ― ‘line-height’ 与 ‘vertical-align’ 属性**

计算行框里的各行内级框的高度。对于置换元素、行内块元素、行内表格元素来说，这是边界框的高度，对于行内框来说，这是其 ‘line-height’。

行内级元素根据其 ‘vertical-align’ 属性垂直对齐。

行框的高是最顶端框的顶边到最底端框的底边的距离。